Compare frogs and toads with a Venn diagram

A Venn diagram is how many classrooms compare two things: two animals, two characters, two states of matter. The overlap is where the thinking happens, because a student has to decide whether a fact belongs to one thing or to both.

In this tutorial you'll build one students fill in by dragging. Two overlapping circles hold Frogs and Toads, and the middle is Both. Six fact cards sit beside the diagram, and students drag each one into the right part.

It uses the drag-and-drop idea from Sort animal pictures into their habitats, a see-through Drop Bucket over a picture, with two new parts. You draw the picture yourself from two Shape widgets made see-through with Opacity, so the overlap shows. And you shape each bucket so the facts dropped into it stack neatly.

Step 1: Set the scene

Start a blank lesson (New lesson, then Start from scratch). Click the lesson's name at the top left and call it Frogs and toads.

Click an empty spot on the scene, open Background, click Choose a style, pick Mesh sunrise and click Apply background. Open the Closing Scene from Scenes and give it the same background, so the ending matches.

Back on the Opening Scene, add a Heading that says Frog, toad, or both? at the top, and a Body under it that says Drag each fact to where it belongs.

Then add a photo of each animal, so students know which is which before they read a word. Add an Image, set Width and Height to 100 under Style & Layout → Show more options, and open Image Source → Open Media Library. Search for green frog and insert a close-up. Set Fit to Cover and Border radius to 16, and in Accessibility replace the Alt Text with A green frog with smooth, shiny skin. Do the same with a brown toad photo and the alt text A brown toad with bumpy, dry skin.

Put the frog on the left and the toad on the right, the same sides their circles will be on.

Step 2: Draw two overlapping circles

Add a Shape. Its window opens straight away: pick Circle and click Save. Then, under Style & Layout → Show more options, set Width and Height to 400 and drag the circle to the middle of the scene, under the heading.

Make it the frog's colour: click Fill Color and pick a green. Now drag Opacity down to 60%. That's what makes a Venn diagram work: when the second circle overlaps this one, you'll see both colours mix in the middle.

Give the circle a darker green Stroke Color too, so its edge stays crisp where it crosses the other circle, and rename it Frog circle (click Shape 1 at the top of the properties panel).

For the second circle, copy the first: with the frog circle selected, click Duplicate in the toolbar above the canvas, drag the copy to the right until the two circles overlap by about half, and change its Fill Color to orange. The copy keeps the size and the opacity, so only the colour changes. Give it a darker orange Stroke Color and rename it Toad circle.

Overlap them a lot. The middle has to be wide enough to hold a fact card, and so does each side. Here the circles are 400 wide and their centres are about 190 apart.

Last, label the three parts. Add a Subheading for Frogs near the top of the green part, Both at the top of the overlap, and Toads near the top of the orange part.

Step 3: Lay a see-through bucket in each part

The circles are only a picture: they can't catch anything. Students drop facts into Drop Buckets, so put one inside each part and make it invisible except for its outline.

1. Add a Drop Bucket and, under Style & Layout → Show more options, set Width to 160 and Height to 200.
2. Drag it into the green-only part of the diagram, under Frogs.
3. Click Background and choose Transparent, so the circle shows through.
4. Click Border Color and choose white, so students can see where to drop.
5. Set Border Radius to 16.

Rename the bucket Frogs only, and in Accessibility set its Alt Text to Facts about frogs only go here. Screen readers say that name when a student moves a fact over it.

Repeat for a Both bucket in the overlap (Facts about frogs and toads go here) and a Toads only bucket in the orange-only part (Facts about toads only go here).

Make each bucket clearly taller than it is wide. A bucket arranges what it holds from its own shape: a tall one stacks two facts one above the other, but one that's nearly square puts them side by side and shrinks them until students can't read them. 160 × 200 stacks them.

Add the buckets after the circles. Widgets added later sit on top, so the bucket catches the drop instead of the circle hiding it.

Step 4: Make the first fact card

Add a Text widget and type Smooth, wet skin. Then, in Style & Layout:

1. Set Font Size to 18.
2. Click Background Color and pick a pale yellow, so the words look like a card students can pick up.
3. Choose Fixed width, then set Width to 150 under Show more options.
4. Click Align center.

Drag the card to the top of the empty space at the left of the scene, and rename it Smooth, wet skin. Naming each card after its words makes the answer key in Step 6 easy to read.

Now make it something students can pick up: open Drag & Drop and set Mode to Draggable. The header now says DRAGGABLE, and a round link badge appears in the middle of the card.

Step 5: Copy the card for the other five facts

The first card already has its colour, width and Draggable mode, so copy it rather than starting over. With it selected:

1. Click Duplicate in the toolbar and drag the copy under the first card. Grab it towards one end: its middle is the link badge, and dragging that draws a connection instead of moving the card.
2. Double-click near the card's left end, select its words and type the new fact.
3. Rename the copy after its new words.

Make five copies, and mix up the order so it doesn't give the answers away:

• Eats insects
• Bumpy, dry skin
• Long back legs
• Hatches in water
• Short back legs

Keep each fact short enough for one line. A fact that wraps onto a second line makes a taller card that crowds the one below it.

Step 6: Connect each fact to its part

This is the answer key, and you draw it. Click a card near its left end to select it, then drag from the link badge in its middle and let go over the part where it belongs:

• Smooth, wet skin and Long back legs go to Frogs only.
• Eats insects and Hatches in water go to Both.
• Bumpy, dry skin and Short back legs go to Toads only.

Each drag marks the fact correct for that bucket and lets it be dropped in all three, so students can still put it in the wrong part and find out.

To check your work, point at a bucket. Lines appear from every fact that belongs there, and the number in the bucket's corner counts them: each should say 2.

Connected one to the wrong part? Drag its badge onto the same bucket again to remove the line.

Step 7: Show right and wrong as students sort

Click inside the Both bucket and click ⚙ Configure in the pill above it. Correct draggables lists the answer key you drew: Eats insects and Hatches in water are ticked.

Set Feedback to Immediate, leave This bucket is correct when… on Everything matches, and click Save. Now a part's outline turns red as soon as a fact that doesn't belong lands in it, and green once it holds exactly its two facts. Do the same for Frogs only and Toads only.

Each bucket is worth 1 point, all or nothing, so the diagram is out of 3.

Last, the yellow pill at the top asks for a way to finish early (No Lesson-Submit Button). Add a Submit Button, change its Label to I'm done, set Submits to Lesson, lower its Font Size to about 18 px, and put it in the bottom-left corner under the cards.

You don't need a Check button. The scene's Progression is Next, checked Continuously, so the moment all three parts are right, Berdee moves the student on to the Closing Scene.

Step 8: Sort the facts in preview

Click Preview and sort the facts as a student would. Put one in the wrong part on purpose:

Drop Long back legs into Toads and that part's outline turns red: a toad's back legs are short, which is why toads hop instead of leaping.

Drag it to Frogs and the red goes away; the two frog facts stack one above the other, a little smaller so they fit. Sort the rest, and the lesson moves on by itself to the Closing Scene with a score of 3 out of 3.

What you built

You built a Venn diagram students fill in with their hands:

• two Shape circles at 60% Opacity, overlapping so their colours mix in the middle,
• three see-through Drop Buckets, one inside each part, each clearly taller than wide so two facts stack,
• six Draggable fact cards, built once and duplicated,
• an answer key drawn by connecting each fact to its part,
• Immediate feedback, so a fact in the wrong part shows up red right away, and
• a scene that moves on to the ending once every fact is sorted.

The same diagram works for anything you compare. Change the photos, the labels and the six facts, and you have Living and non-living, Fiction and nonfiction or Squares and rectangles. For more facts, make the buckets taller rather than wider, so they keep stacking.