Using the HTML5 client for QuizImage

Updated November, 2017

The QuizImage Lesson Builder generates HTML files with the Java Applet tags. In order to use the HTML5 client code, you need to edit the HTML.

Here is the scoop on the QuizImage and DiscoverImage. You really only have to move the old lines without changing them -- should make life much easier. Here are the details:

  1. the "quizimage_min.js" file is the client code and should be put in a convenient location.

  2. For each lesson: in the lesson's HTML, within the <head> block insert this: <script type="text/javascript" id="QIMAGESCRIPT" src="../quizimage_min.js" data-mode="quiz" data-quizdiv="divcan"> </script> (you will need to set the "data-mode" to either "quiz" or "discover" depending on the lesson type).

  3. Also, replace the tag with: <body onload="QUIZIMAGE.go()">

  4. Then, locate the <APPLET>...</APPLET> tag in the HTML file. Copy _all_ of the lines between these two tags (they will all start with <PARAM ...>) and paste them just before the "</script>" line (which closes off the <script> tag) in #2 above. When you're done with this step, #2 should now look something like: <script type="text/javascript" id="QIMAGESCRIPT" src="../quizimage_min.js" data-mode="quiz" data-quizdiv="divcan"> <param name="images" value="quizes/quiz1.jpg" /> <param name="Show_Outline" value="true" /> <param name="separator" value=";" /> <param name="polygons" value=" -16776961, 373,53 ,370,53 ,367,54 ,364,55 ,361,57 ,357,58 ,354,59 ,351,59 ,347,60 ,344,62 ,341,63 ,338,64 ,335,66 ,332,69 ,329,70 ,326,71 ..... ..... (...omitted a bazillion lines of polygon coordinates) ..... ,620,247 ,620,250 ,619,253 ,619,256 ,620,259 ,623,261 ,626,262 ,630,263 ,633,263 ,636,263 ,636,230 " /> <param name="font_size" value="16" /> <param name="features" value="Lake Breeze Boundary; Cirrus; Cumulus;Cumulonimbus" /> </script>

  5. Go back to the <APPLET>....</APPLET> lines and replace all that with: <div id="divcan" style="margin-bottom:50px;position:relative;margin-left:auto;margin-right:auto;"> </div> There may need to be some fiddling with the "margins" on this,
One other thing -- You might want to change all the "font_size" values to 16 or so...whatever looks good!