p5.js widget for quiz (hidden code?)

[shiffman]

Maybe related to #54? I'm working on some online "quizzes" (self-paced, take-home) for students to do to check their knowledge for our fall course at ITP. You can see a draft here:

http://shiffman.github.io/ICM-Quizzes/week1-drawing/
https://github.com/shiffman/ICM-Quizzes

One idea I have is for the widget to show a "end result" that the student has to try to match. So the widget would appear with the running canvas, but no code. Then the student would write the code and hit run to see if they can get the matched result. Perhaps there would be a way to "reveal answer".

I'm not sure if this is a feature that makes sense for the widget or whether this is really a design question and I should just embed a canvas above the widget as the "target".

But throwing this out there in case you have any clever ideas.

[russellcameronthomas]

I like this idea and I have been thinking of a similar feature. I was thinking of implementing it this way:

1. Create two p5-widget code boxes: a) Student code box, with some instructions as comments, or template to get them started; and b) The "answer" code box with the complete working p5 code.
2. Write javascript to create a wrapper iframe for both of these code boxes. The wrapper would initially hide the "answer" code box and only show it when certain conditions are met, maybe: a) Student clicks on a "Show Answer" button or b) Student modifies their code and runs it (without compiler errors? X times?) and also presses "Show Answer" button. The second approach would be trickier to code, but maybe possible.

The advantage to this approach is that it would not require any modifications to p5-widget.js. The disadvantage is that it requires that someone write and test this wrapper code. If I get that going, I'll be happy to share.

FYI, my site is here: http://library.meritology.com/processing/chapters/2-codebox