Creating instant feedback multiple-choice questions 2

This one is a much more elegant solution to creating interactive multiple-choice questions than using “drop-down” menus. The code below uses an HTML button and JavaScript alert.

<form> <input type="button" onclick="alert('Correct!')"value="1st option"> </form>

This is what you actually see. Click on the button and see what happens.

So, in order to create a multiple choice question, you just have to change the "value" of the button (that is what will appear on the button)  and the message of the alert. For example:

---

What colour is Darth Vader's lightsaber?

 Green

 Blue

 Red

 Purple

---

Here is the code. Just change the options and the message of the alert to your needs.

<form>
<input type="button" onclick="alert('Right!')"value="A">First option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="B">Second option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="C">Third option
</form>
<form>
<input type="button" onclick="alert('Wrong')"value="D">Fourth option
</form>

This is what you will see in your browser:

First option 

Second option 

Third option 

Fourth option

I think it is safe to say that all Internet browsers now sopport JavaScript. The only problem with it is that some users may chose to disable it in their browsers. In that case, your code won't work. 

That is it!

      

        Gus

Creating instant feedback multiple-choice questions

This is a very old trick. It is not as fancy as using CGI or JavaScript but it is simple and it works. Here is an example:

   What is Darth Vader's real name?

[____A____] Wrong Luke Skywalker

[____B____] Right! Anakin Skywalker

[____C____] Wrong Yoda

[____D____] Wrong Princess Leia

How it is done:

You can make use of  “drop-down” menus to display something upon a click. Drop-down menus were not made with this in mind but it will serve our needs.

Here is an example of the HTML code for a drop down menu:

<select>

<option>Menu</option>

<option>Edit</option>

<option>View</option>

</select>

This is what you see:

Menu Edit View

All you have to do is to copy the code belowl and paste before each option. Remember change the "Right!" and "Wrong" options to match the correct answer. 

<select>

<option>[___A___]</option>

<option>Right!</option>

</select>

<select>

<option>[___B___]</option>

<option>Wrong</option>

</select>

<select>

<option>[___C___]</option>

<option>Wrong</option>

</select>

<select>

<option>[___D___]</option>

<option>Wrong</option>

</select>

You can also add another menu option to give some feedback. For example:

[_____A_____] WrongThat's his son Luke Skywalker

That is it!

      

        Gus