CL Newsletter, December 2022 - Challenge Creator, Part 3

In today’s newsletter, we’re going to take a look at how we can take a Challenge Creator from good to great. What are the little details that make an activity shine?

To start, take a look at this activity. As we talked about in our last two newsletters, there is plenty of variety in both the possible challenges and solutions. That’s a good indicator that this activity is worth polishing.

Now comes the fun part. How can we use CL to make some improvements to this activity?

Quality Control

One of the most exciting things about Challenge Creators is that students get to show off their creativity. Because students can make such a wide range of challenges, it’s important to do what we can to encourage variety and make sure challenges are actually solvable. There are two sinks that can help us with that.

preventChallengeCreationReason: The preventChallengeCreationReason sink can be used to keep students on the “Make the Challenge” screens. Typically, we want to make sure students have created a challenge for their classmates before continuing on from this step. We don’t have to worry about whether the student’s challenge is solvable just yet.

In our example, we can be sure that students have created a challenge so long as the flag has moved and at least one tile has been added to the puzzle. We can capture those ideas with these lines of CL in the CCGraph2 component.

initialFlag = this.number(g_{oalX}) = 10 and this.number(g_{oalY}) = 4 inititalTiles = this.number(i_{nitial}) = 1

In the Challenge Creator component, we can add the strings that we’d like to show for different reasons. Whenever the string is blank, students will be allowed to continue to the “Solve the Challenge” screens.

preventChallengeCreationReason: when CCGraph2.script.initialFlag and CCGraph2.script.inititalTiles

preventSubmissionReason: Imagine you are teaching a lesson in which students are allowed to make all the questions, but none of them are solvable. The horror! Luckily, we can prevent students from submitting their challenge until they have solved it themselves.

In our example, we will let a student submit their challenge if they have solved the challenge without hitting a barrier. We will also make sure that the confetti animation has finished playing. This is to ensure that students are fully appreciating the beautiful animation and to prevent the confetti animation from playing whenever the response tiles are clicked in the gallery.

preventSubmissionReason: when CCGraph3.number(s_{uccess}) = 1 and CCGraph3.number(i_{sHit}) = 0 and CCGraph3.number(a_{confetti}) >= 1

Spicy Thumbnails

Now that we’ve got some quality control going on, let’s make our gallery a little more exciting. To quickly improve the look of our gallery, we could use the graphs we already have as the Challenge Thumbnail and Response Thumbnail.

Challenge Creator settings Our new thumbnail
Screenshot of the Challenge Creator component showing that the "Challenge Thumbnail" option has been set to "Graph (CCGraph2)" and the "Response (CCGraph3)" Screenshot of an example thumbnail. There is a hot air balloon in the bottom left corner and there are several barriers between it and the goal flag on the right edge of the screen. The goal flag has a blue point behind it. There are several buttons for controlling the balloon in the bottom right corner of the screen. There is also a red x in the top right corner.

While that’s plenty easy, take a look at our result. There is a point behind the goal and the controls are taking up a lot of space. The clear button also doesn’t really belong in our thumbnail.

One neat trick we can use here is to make hidden graphs that only include the things we want to show up in the thumbnails. As long as we make sure to set the hidden sink to true, students won’t see them except in the thumbnails! I’ve added two graphs, challengeThumbnail and responseThumbnail, to the activity and now we have some beautiful thumbnails!

Screenshot of the Challenge Creator component showing that the "Challenge Thumbnail" option has been set to "Graph (challengeThumbnail)" and the "Response (responseThumbnail)"

Challenge Thumbnail Response Thumbnail
Screenshot of an example challenge thumbnail. There is a hot air balloon in the bottom left corner and there are several barriers between it and the goal flag on the right edge of the screen. Screenshot of an example response thumbnail. This thumbnail looks the same as the challenge thumbnail, except the balloon is now at the same location as the goal flag on the right side of the screen. There is also a set of line segments connected by dots showing the path the balloon traveled to get to the goal.

If you can, try to make sure the response thumbnail shows the variety of solutions students might come up with. In this case, the thumbnail will show the paths taken.

Check out the finished activity here!

1 Like