Multiple-Choices Game

Multiple-Choices Game

by Yaniv Cogan -
Number of replies: 20

Hi,

I'm not sure if this is the right place to post this, but if it is of any use to anybody, this is what I worked on for the past month (tested on moodle 2.9 only - would love to hear if this is compatible with other versions):

So what is it? It is a bit of javascript that will transform a quiz made up of multiple-choice type questions into a little game. Here is a screenshot:

screenshot of the game

Here is a backup of a quiz activity. Download it, and restore it into a course (preferably one that isn't in use right now) and read this explanation:

What is the purpose of this template?

The only purpose of this game is fun - if you or your students find it to be, well, not fun, I can't think of anything it would serve. This tool wasn't tested to prove whether it has any impact on the level of understanding of the subject matter by student, nor was it designed to make such impact.

Gamification of educational contents as a whole stands on a very shaky scientific foundation, with very little in the way of concrete evidence showing a statistically significant difference observed between groups who learn a subject through gamified means to groups who don't, in a controlled environment. 

So, don't expect this game to provide any benefit beyond, hopefully, adding some fun time to a, possibly, otherwise not-so-fun lesson.

How does this work?

The activity you just restored contains a quiz, which already contains 2 description type questions, and one multiple-choice type question.

The first description is called "resources" - and if you try editing it, at first you'l see nothing in the "question text" field. However if you switch to the html editor (by pressing the <> option in the toolbar - you'll be doing that a lot throughout this tutorial), you'll see that it is filled with hidden audio and img tags. These are all the resources that the game uses - every single UI element, sprite, sound effect, and the background music.

Please don't edit any of these unless you are sure you know what you are doing.

The second paragraph is called "code" - again, you'll have to switch to the html editor to see what it contains. this is all the relevant code for the game.

In general, what I do is, once the quiz page is loaded, find and hide every single question from the form - and at the same time parse the questions and possible answers, and feed them into the game.

 

What can I do with this?

By now I suspect you have already tried playing the game - it contains only one question. you can add and remove questions to the game as you wish, just like you would to a normal quiz! (just be careful not to accidentally remove either the code or resources "questions")

Here is what you must keep in mind, though:

  • You can only add multiple choice type questions to the game
  • All questions you want to add to the game must appear on the same page as the resources and code questions - and that's a good thing! that means you can add different questions of all types in pages before and after the game!
  • You must set every question that will appear in the game to "only one answer"
  • You must set the "Shuffle Choices" option to "none" - this is very important! the questions will be shuffled automatically anyway in the game, but the option in the question editor must be unchecked!
  • Set "Number the choices?" to "No numbering"
  • The first answer you input must be the correct answer - don't worry, the answers will be automatically shuffled in-game (more on cheating later)
  • Any single answer can contain either text, or images - but not both.
  • If you choose to use a textual answer, as will be the case 90% of the time, go into the html editor, and make sure that the text isn't surrounded by <p> tags, or any tags what-so-ever, actually - or they'll show in the game.
  • the game supports anywhere from 2 to 5 different answers per question (technically supports even more, but it will look weird)
  • All answers that aren't the first answer will be considered "wrong" by the game

 

How the game works

After hitting the play button, you'll see a tree. On the tree top, a question will be displayed, and apples will fall down, each one with a possible answer on it. Upon clicking on an apple, it will burst, and out of it will appear a symbol - either an X or a check-mark (V), which signifies whether or not the apple that was clicked contained the correct answer.

If a question is answered incorrectly, it will re-appear later in the game, and if it is answered incorrectly once more, it will reappear later again, and so on.

Once a question is answered correctly, the player is granted points - 10 if they answered correctly on their first try, 5 on the second try, 3 on the third, 2 on the fourth, and one if they needed 5 or more tries)

Before answers start falling, there will be some time to read the question - that time gets shorter in subsequent attempts to answer the same question - the rational being that on its first appearance, the student needs a lot of time to read the question, but after they have read it once, they can quickly recognize it when it re-appears.

At the end of the game, based on the score, the player will get an apple/medal thing which will presumably make them very happy about their life accomplishments. Medals are granted based on the score the player got divided by the maximum possible score for the game - a gold medal requires a perfect game.

Scoring

There are two different systems in place for keeping track on score - one is the in-game system, which is detailed above.

However, the results of the game are also kept in the moodle! Notice that if you navigate to the results tab for a quiz that contains a game, you'll see results for all the questions, including those that should only appear in the game.

How is this calculated? When a player clicks an apple, if this is their first attempt at the question, the game tricks moodle into thinking that the player has chosen this answer out of the multiple possible answers.

I really recommend ignoring the results you see in the results tab - don't judge your students by a number that is made out of both understanding of the subject, but also hand-eye coordination and digital literacy.

What you can do, is use the statistics tab, to make sure that the questions in your game are balanced and reflective of the students' knowledge.

 

Hotkeys

  • Pressing M will mute/unmute the game
  • Clicking the game once will enter to fullscreen mode. You can toggle that off using the esc key, or toggle it on/off sing the f key, or toggle it on at any time by double clicking on the game
  • If you move the cursor to the edge of the screen, you'll see a mini-menu, which will also allow you to toggle fullscreen and mute.
  • Pressing the S key will display two stats: speed, and graphics.
    • the speed is 1 by default, but if you know in advance that one of your students is slower, or has a difficulty handling the mouse, you can use the 5 and 6 keys, while pressing S, to slow and speed up their game. This will only remain in effect for a single session. You can go from a max of *2, to a minimum of *0.25.
    • the graphics are "auto" by default - that means that they will start on "high", and automatically switch to "low" if the framerate drops under some number which I don't remember.

 

Cheating

If your class has students who know programming, it might be best to stay away from this template; here are some ways one could use to cheat:

  • Turning off javascript from the url bar (in chrome) - this means that instead of the game taking over, the questions will just be listed. This is bad, since, as you'll recall, the first answer of every question is the correct one - the shuffling only occurs in-game.
    • On some versions of Internet Explorer, javascript scripts are turned off by default, which could be a problem...
  • One could theoretically use the browser console to print out the questions array, including which answers are correct
  • A student could learn about the S+5 hot key combination and make the game easier for themselves.

But - I wouldn't worry about these, in general. If cheating the system is what your students find fun, and you, as per the recommendation above, use this game only for the fun of it, and not for assessment, then you'll achieve your goal anyway.

 

I want to change something!

The code is in your hands, you can change anything you want! But here are some suggestions:

  • If you want your game to be in a right-to-left language, like Arabic or Hebrew, open the "code" question, switch to the html editor, and press ctrl+f, to search the code. Search for the phrase var rtlWholeGame = false; and replace the word "false" with the word "true".
    • If you want the bulk of the game to be from right to left, but to have a single answer, or multiple answers, for some questions written from left to right (say, if you are trying to teach English to Arabic speaking students, so you want questions to be in Arabic and answers to be in English), just add to the answer, in text, the word "ltr" - it will be automatically removed from the answer in the game, and will be formatted properly.
  • If you want to change message that appears in the main menu, search the code for "openingMessage =" and replace whatever is there with the message you want.
  • same for the message in the ending screen - only search for "closingMessage ="
  • If you want to change the splash question, that is, the questions that has only a single answer, and appears if the player has answered any question incorrectly, to notify them that the falsely-answered questions will now re-appear, search for the word "splash", and you'll probably understand what to do from there
  • If you want to change the background music - edit the "resources" question. Upload your new sound file, go to the html editor and copy the src value. now delete the tag, and paste the src instead of the src in the first audio tag, which has a "background_music" id.

 

known issues

  • Sometimes doesn't work on IE because it auto-blocks scripts
  • If you try duplicating a course using course backup, the game might not work out of the box in the restored version of the course. I have no idea why, but manually backing up the game activity seems to work.
  • Most importantly - the game isn't really fun in my opinion, and is more of a proof of concept. Which, in itself, is problematic, because it is built from the ground up in a weird and twisted way that anyone who actually has access to their Moodle's code, and knows their way around it, would never want to use.
    • That being said, I think that making a library of some javascript tricks that people who are, say, managers and teachers,  can use without needing an admin to install a plugin, or a developer to mess with the code, could be really helpful for some.

That's it, I think - I'll be happy to offer support to anyone who wants to try implementing this game, and I'll be more than happy to hear feedback (constructive or otherwise), and maybe get some tips as to how to improve the compatibility of this template with different browsers and devices!

 


Average of ratings: Useful (3)
In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Hi Yaniv

When I first saw your screenshot, I know this was different. So an hour later, and I have downloaded and restored your course backup file. And WOW. Like I mean, WOW!! Parallax movement in a quiz game. Unlike anything I have ever seen. And the colours are like, bright and colourful. I feel like I am in a Tim Burton movie set (think Charlie and the Chocolate Factory, Alice In Wonderland, etc.). Mesmerising. And the music ... very nice and spa-like and trance-like.


I do have a problem. I added a second multiple-choice question to the quiz. But the quiz will HANG after I click the correct answer to the first question. Here is my mbz file to download. Maybe you can find out where I went wrong. I mean I unchecked the "Shuffle choices" like you said, but still hangs after I click the correct apple of the first question. I am stuck. I am using Moodle 2.7.2.

Regards
Frankie Kam 

P.S., I have sent you a PM so that you can log into the course and have a look see what may be the problem. Like I said, it will hang after the first question.

In reply to Frankie Kam

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

An update:
Here's what I did to get the second Multiple Choice Question to work. I copied (cloned) the first MCQ and then edit the cloned MCQ. The quiz did not hang.

Gimme 10 minutes...

...(10 minutes lates)...okay, strange. I just manually added (created) a new MCQ and added it to the Quiz and joined it to the same page as the first and second MCQs - the quiz works fine. No hanging now. 

Regards
Frankie Kam 

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

Hmmm, I was almost sure that I fixed that. I'll restore that .mbz to make sure, but as far as I can tell, the problem is that the script goes into an infinite loop once the second question is displayed. Now, there is one place where this could potentially happen - when the game has to take the question, and split it into parts, so that it doesn't overflow the canvas.

I thought that I has everything in place to prevent that, but maybe...

Ok. so the problem is with "Frankie Cam", whose first name is apparently too much for the game.

If you look at the code, you can search for a function called "addLn". In it, there is a while loop.
If you switch it to this:
  while (ctx.measureText(copyOfText).width > maxWidth && copyOfText.indexOf(" ") != -1) {

That should fix the bug. I'll update my .mbz ASAP.

Thanks alot for taking the time to test this!

In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Yaniv Cogan -

oops - wrong fix instructions! what you shoud actually do is replace the line where the var lastSpaceInRow is defined with this line:

var lastSpaceInRow = Math.max(copyOfText.lastIndexOf(" ", avgLengthPerLine), copyOfText.indexOf(" "));

The .mbz on drive is now updated, as well.

Also, sorry about misspelling your name in that last post... I didn't realize at the time that you were the fairest of them all...

Average of ratings: Useful (1)
In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Haha!

I commented off the line above it and added the line you suggested into the code (shown in yellow):


Yes, I can confirm that now the Quiz works fine. No more hanging when Question 2 starts. And you have already put that correction into your downloadable mbz file. So it is looking good!

Sorry, I don't understand Hebrew and so what is this screen and apple for?



One improvement: The text color is yellow which is a very-low-contrast color as the background is yellow-golden-orange-brown.  The text color needs to stand out more, to be clearer in comparison to the multi-coloured background. The black border of the font helps me to make out the text, but the fill color of the text I think could be improved by replacing it with white, for example.


So, my question is: How can I change the color of the question text font?


By the way, CONGRATULATIONS!!! This is the first ever 3D-parallax movement Moodle Quiz question in the world!  Keep up the good work!

Particularly Helpful and Playful Moodler 2014-2016
Frankie Kam

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

Oh, the Hebrew thing is a message that notifies the user that the any questions they chose an incorrect answer to will reappear. It has no effect on the score or anything like that. I forgot to update it to English apparently.

The .mbz in drive is already updated, but a quick fix would be going to the code, searching for cQuestions.push(new Question([new Answer("בסדר", true)] and changing that whole line to this: 

cQuestions.push(new Question([new Answer("okay", true)], "all incorrectly answered questions will reappear - maybe you'll get it right this time!", 10, 0));

Regarding the text color - yes, you are right. I thought that the black outline would be enough. but particularly on smaller monitors, the text can get hard to read.

Go to the code in the html editor, and search for context.fillStyle = "rgb(255,220,150)";

Switch the rgb colors to whatever you want.

For future users - I'll update the .mbz so this will be controlled by a variable instead. Search for var strokedTextColor in the up to date version from google drive.

BTW - you can remove the <p> tags from around the question using the html editor if you want. I should add a function to trim them automatically, which is already done for the answers, but not for the questions.

In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Hey Yaniv. Thanks for the code snippets and how to locate them. They worked.

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

Great!

If I have the time, I'd like to make some other similar game templates.

The thing is - on the one hand, I understand that this way of doing things (having a different question with all the code written in it and publishing it as a .mbz) is wrong, and somewhat annoying to use - as opposed to programming it as a plugin.

On the other hand, my hope is that this way, teachers and course managers, who don't have the ability to install plugins on their Moodle site, will still be able to enjoy an array of question types and game templates. Also - I personally don't really know anything about Moodle development, so I'll have to learn that before I can provide this kind of templates in a more traditional way.


In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Hi Yaniv

How do I make the question text to be displayed lower?



As you can see, the sentence "Moodle was invented in..." is obscured (blocked) by the "Press Esc to exit full screen" black opaque window.


Also I tried for an hour to find the answer on Google how to insert a line-break in the Javascript sentence "All incorrectly answered questions will reappear. Maybe you'll get it right this time. Cheers.". No can do. Maybe you know of a way.


I'm trying to get the text to be shown as 3 lines. I.e.,

All incorrectly answered questions will reappear.
Maybe you'll get it right this time.
Cheers.

Here's my code:

cQuestions.push(new Question([new Answer("okay", true)], "All incorrectly answered questions will reappear." + "Maybe you'll get it right this time. Cheers", 10, 0));

Regards
Frankie Kam 

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

Hmmm... First question is easier - search for "//draw questions, in parts". In the line under, you'll see:
drawStrokedText(ctx, question[i], 600, 50 + (i * 36));

Replace the "50" with whatever you want - it represents the number of pixels between the top of the frame and the first line of text in the question.

If you replace the 36 with something, that will change the vertical space between lines if the question is made out of multiple lines.


Now - for the second question, there currently is no way to manually insert line break points - but it is a really easy feature to make, I'll update the code with it in 2 days probably (and as usual both bring the .mbz up to date and post a quickfix).

What you can do right now, is search for //This is an arrays that includes each line of the question (or - if you've already worked on bringing the question down, just look up a couple lines, it's really close). Edit the line:
question = addLn(questions[pos].getContent(), ctx, screenWidth);

Change it to something like:
question = addLn(questions[pos].getContent(), ctx, screenWidth-300);

This will make the game fit the question into a narrower space, which will, in turn, make it split into more lines. Now - this will have an effect on all the questions, not only the "splash" question - though you could use an if statement to single it out. some thing like if (questions[pos].getContent().indexOf("All incorrectly")!=-1).


Again - thanks for taking the time for testing this, I hope you are having fun with it.

In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Hi Yaniv

You really know your code! Yes, I have applied your code changes as you have pointed out.



Here are the results:

(1) The Question text is no longer overlapping with the temporary black 'Esc' window.



(2) The long string of text now wraps around with a shorter width, resulting in a pseudo multi-lines display. Which is fine! wink



I'm lovin' it!

Regards
Frankie Kam 

In reply to Frankie Kam

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Some wishlist items.

It would be nice to allow the user to choose different skins or themes for the quiz.
For example, there could be an alternative background which is more green than red. 


Or more blueish than red.


And the user can choose red apples instead of green apples. Green apples are usually more sour than sweet(?). Red apples are more tempting? Haha!


But there's one more thing - instead of the apple tree background, if I wanted a different background, how would I do it? For example, instead of this,



...why can't I have this? See the BIG DIFFERENCE?



Above is a mock-up of a Game Of Thrones Multiple-Choices game quiz question. Imagine the GOT theme song instrumental dramatic music playing in the background.

Maybe you will lose the parallax movement special effects when I move my mouse pointer, if I use this alternative background. Never mind. But at least maybe you can have the "bright fireflies" or "floating burning ember specks" randomly floating around the background. Also, instead of apples for the choice holders, I am using an Eagle crest from the GOT series.

Do you now see all the amazing and creative possibilities of making Moodle quiz questions unlike any students and teachers have ever seen before? My point is that the background and music can be an important element in setting the ambience for the quiz. I mean why must MCQ always be in text? Why not make the quiz more multimediaish, more engaging and more captivating?

Maybe each question can have its own separate background AND separate Apple choice image? Maybe even a separate music score? Wow! 


Regards
Frankie Kam 

Average of ratings: Useful (1)
In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

All of these changes are something one would do by playing around in the 'resources' description-type question. It is pretty wonky, so it will take me some time to write a decent explaination. But in general, there are many moving parts right now - say you wanted to replace the background - so you find another background image, and set is as "background". But now, you have to get rid of all the images in the foreground layers (they are stored independently for the parallax effect). And not only do you need to remove the files, but you also have to comment out all the parts in the scripts that refer to those layers.

If you wanted to replace the apple - that would mean replacing the main apple image, + the outline-on-hover image + 3 frames of the apple exploding/disappearing + probably the bite sound effect.

Anyway - I'll try to make these things easier to edit, and post an update.

In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers
Hi Yaniv

Thanks for replying. Yes, I did notice the mass of code for each layer of image. I'll see if I can tinker with the code. You know, like taking apart a Rubik's cube and then putting it back together.

Regards Frankie Kam

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

Ok - after trying some options, this, I think, is the easiest way to play around with the resources:

go to the "resources" question, turn on html editing, and select all the code.

Open your favorite text editor/IDE, and paste the code (if you favorite text editor is notepad, or the google searchbar or something like that, please use Word or something instead, even if you don't like it).

Press CTRL+F probably (maybe CTRL+R) to bring up the search/replace dialog. In the "find" field type: display:none and in the "replace" field display:block

Select "Replace All", which should result in 42 replacements. Select all the text, and copy it in instead of the text in the html editor (which presumably you still have open in your browser).

Turn off html editing, and you'll now see every single asset used in the game in a list (some images are pretty large, so navigation is a bit tricky).

Find an asset you want to replace, select it and select the "image" option in the toolbar. Since you've selected the image, that should open up an already filled "image properties" form, which looks like this:

Copy the URL and save it for later. Close the Image Properties dialog.

Move your cursor so that things you type will appear under the image you want to replace, and click on "Image" - this time, without any image selected, you should see an empty Image Properties Dialog.

Click "Browse Repositories", find the replacement image you want, and select it. 

Click on "Save Image", and copy the URL for that image.

Go back to the HTML editor, and search (in browser, using ctrl+F) for the first url you copied and saved for later - replace it with the newer url.

Re-select the entire code, again, copy it to your text editor of choice, and this time replace display:block with display:none.

Copy that back to the html editor, save the changes made to the question, and try running the game.


 In regards to changing colors, specifically, I'm not sure if you can manually change the hue like you would in an image editing software, but what you can do, is, somewhere during the painting process, tell the canvas to draw a semi-transparent rect over the entire screen, and set that rect to some color using rgba. Before painting it, set the blending mode for the context (ctx) to something. You may achieve interesting effects this way (remember to make the blending mode normal again after drawing the rectangle)


In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Thanks Yaniv for the pointers. Very helpful. I will definitely give it a go and see if I can change the graphics and images. 

(5 hours later)

Yaniv, yes your (clunky) method works!


How I did this was I uploaded the two attached images. Then I replaced

<img src="http://cefl4u.org/game/draftfile.php/7/user/draft/784574803/apple.png" id="apple" style="display:none">
<img src="http://cefl4u.org/game/draftfile.php/7/user/draft/784574803/outline.png" id="outline" style="display:none">

with 

<img src="http://cefl4u.org/game/draftfile.php/7/user/draft/784574803/GameOfTronesCrest_new.png" id="apple" style="display:none">
<img src="http://cefl4u.org/game/draftfile.php/7/user/draft/784574803/GameOfTronesCrest_Blue.png" id="outline" style="display:none">

Cheers
Frankie Kam

Attachment GameOfTronesCrest_Blue.png
Attachment GameOfTronesCrest_new.png
In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Hi Yaniv

I've tried to add a custom background png file to the game but it doesn't work. Probably because in the process, I deleted some code from the "question Resources" which is accessed by the Javascript code inside "question Code".


I know you've spent a lot of time and efforting coding in the animations and parallax movements, but what if I just want to have a singlebackground image without any of the special effects? How do I modify the code to make it simple and lean so that it consists of just one background png file?

For example, see this png background file: (1229 pixels wide x 691 pixels high).

Regards
Frankie Kam 

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -
Hi, I'll work on a version with only one background layer, and only one answers layer (currently you have the apple, the apple gloss, which is in a different parallax layer, and the apple outline), and maybe I'll generate the apple outline programmatically.

Hopefully in the future I can make this a proper plugin, which will on the one hand make usage harder for teachers, but on the other hand allow me to create a basic GUI for editing stuff like background image, music, and time per question.

In reply to Yaniv Cogan

Re: Multiple-Choices Game

by Frankie Kam -
Picture of Plugin developers

Thanks for your reply. IMHO a plugin will make life easier for teachers - as long as they are friends with their Moodle admin. wink

In reply to Frankie Kam

Re: Multiple-Choices Game

by Yaniv Cogan -

That makes sense. I'll do some research and try to figure out whether the best approach would be to develop it as a standalone activity or a question type for the quiz module. But I doubt I'll be able to have anything ready in the near future - so I will still try to make a parallax-less version in the meantime.