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:
- the "quizimage_min.js" file is the client code and should
be put in a convenient location.
- For each lesson: in the lesson's HTML, within the
<head> block
insert this:
<![CDATA[
<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).
- Also, replace the tag with:
<![CDATA[
<body onload="QUIZIMAGE.go()">
]]>
- 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:
<![CDATA[
<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>
]]>
- Go back to the <APPLET>....</APPLET> lines
and replace all that with:
<![CDATA[
<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!
Enjoy!