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.
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.
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.
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.
<img alt=“Screenshot of the Challenge Creator component showing that the " Challenge Thumbnail” option has been set to “Graph (CCGraph2)” and the “Response (CCGraph3)”" src=“https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/3-1.png?width=520&upscale=true&name=3-1.png” style=“outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:100%; font-size:16px” width=“260” align=“middle” srcset=“https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/3-1.png?upscale=true&width=520&upscale=true&name=3-1.png 260w, https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/3-1.png?upscale=true&width=1040&upscale=true&name=3-1.png 520w” sizes=“(max-width: 260px) 100vw, 260px”>&upscale=true&name=3-1.png" style=“outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:100%; font-size:16px” width=“260” align=“middle” srcset=“https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/3-1.png?upscale=true&width=520&upscale=true&name=3-1.png 260w, https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/3-1.png?upscale=true&width=1040&upscale=true&name=3-1.png 520w” sizes=“(max-width: 260px) 100vw, 260px”>
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!
<img alt=“Screenshot of the Challenge Creator component showing that the " Challenge Thumbnail” option has been set to “Graph (challengeThumbnail)” and the “Response (responseThumbnail)”" src=“https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/5-1.png?width=320&upscale=true&name=5-1.png” style=“outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:100%; font-size:16px” width=“160” align=“middle” srcset=“https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/5-1.png?upscale=true&width=320&upscale=true&name=5-1.png 160w, https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/5-1.png?upscale=true&width=640&upscale=true&name=5-1.png 320w” sizes=“(max-width: 160px) 100vw, 160px”>&upscale=true&name=5-1.png" style=“outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; max-width:100%; font-size:16px” width=“160” align=“middle” srcset=“https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/5-1.png?upscale=true&width=320&upscale=true&name=5-1.png 160w, https://hs-6634586.f.hubspotemail.net/hub/6634586/hubfs/5-1.png?upscale=true&width=640&upscale=true&name=5-1.png 320w” sizes=“(max-width: 160px) 100vw, 160px”>
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!