Free Demo
1.866.696.8709
Atrixware » Blog Archive Place Answer Hints in Your Online Quizzes - Atrixware
learning management system
Axis LMS
Ready to Enhance and Streamline YOUR Training?
Works on Windows, MacOS, iPad, iPhone & Android
FREE DEMO

Place Answer Hints in Your Online Quizzes

I was recently working on a Weblearning migration, and I noticed someone had come up with an interesting way to include ‘hints’ inside their questions – they placed a link inside the question that said something like ‘click here to view a hint’, and the link opened up a JavaScript pop-up window with an html page that had the hint text, along with some graphics in some cases.

It got me thinking to how you can use Weblearning to do that without having to build additional html pages. It’s actually relatively simple to do, but perhaps just a tad technical for some. I still thought it was worth writing about, so here goes.

Step 1: The fist step is to write your questions as you normally do.

Step 2: Immediately below your quiz question text (or perhaps even inside of it somewhere), enter the phrase “Click Here for the Hint” (or something similar) – we will be turning that text into a link that shows the hint in a bit.

Step 3: Begin your hint text/graphic area – this will wind up being hidden in the quiz. Add (somewhere in your hint) the phrase “close hint” – this will be turned into a click-able link that will close the hint.

image0015.jpg

Step 4: To turn your phrase “click here for the hint” into a clickable phrase that opens up the hint, click the HTML tab (along the bottom of the editor), and locate the phrase in the html source code. TIP: you can make the code window larger by dragging the bottom-right re-sizer.

image0025.jpg

As you can see in the highlighted code, I have surrounded the phrase “click here for the hint” with some html code. This code can almost be a copy/paste scenario (you just copy/paste it into every question). The only thing you need to change is the ‘q1hint‘ part – each ‘hint’ is given a name (in this example, q1hint), and the link to SHOW and HIDE the hint both need to reference that particular reference (name) so the code knows which one to show/hide.

So, here is the code you can copy/paste into your questions (just change the q1hint each time):

<a href=”Javascript:;”
onclick=”document.getElementById(‘q1hint’).style.display=’block’;”>

Click here for the hint
</a>

Step 5: Staying inside the source code, locate the section that represents your hint. Once you have found that, simply place the following line of markup code immediately before it (again, the q1hint will need to be changed for each question):

<div class=”hint” id=”q1hint”>

Then, immediately after the hint section, place this line of code:

</div>

image0035.jpg

Step 6: Much like we turned the SHOW HINT link to show the hint, we need to add code to the CLOSE HINT phrase as well. This code can also almost be a copy/paste scenario (you just copy/paste it into every question). Just as before, the only thing you need to change is the ‘q1hint‘ part – each ‘hint’ is given a name (in this example, q1hint), and the link to SHOW and HIDE the hint both need to reference that particular reference (name) so the code knows which one to show/hide.

So, here is the code you can copy/paste into your questions (just change the q1hint each time):

<a href=”Javascript:;” onclick=”document.getElementById(‘q1hint’).style.display=’none’;”>
Close Hint
</a>

Step 7: Save your question, and publish a quiz with the question in it. You can also go ahead and add it to a course if you want (so you will be able to try it out).

Step 8: Go to the Modules Tab, and click the PROPERTIES option.

image0053.jpg

Once there, click the ADVANCED tab, then scroll down to the EXTRA CSS section, and enter in the following code:

.hint {
position:absolute;
left: 0pt;
top: 0pt;
width: 100%;
height: 100%;
background-color: #eee;
display: none;
}

image0073.jpg

Now go ahead and test out the quiz.

Here is a screen capture of the quiz before the hint is shown (with the ‘click here for the hint’ link):

image0081.jpg

.. And here is the quiz showing the hint:

image0091.jpg

Admittedly, it is a bit technical, but once you have done one or two of these, it is extremely easy to apply to all of your questions.

I hope many of you find this is helpful -

If you enjoyed this article please consider staying updated via RSS.

Comments are closed.

A Better, Easier & Less Expensive Learning Management System
Try the Atrixware Axis LMS