Merge pull request #24 from jverzani/hotspot

add hotspotq

Project.toml

@@ -1,9 +1,10 @@
 name = "QuizQuestions"
 uuid = "612c44de-1021-4a21-84fb-7261cf5eb2d4"
 authors = ["jverzani <jverzani@gmail.com> and contributors"]
-version = "0.3.7"
+version = "0.3.8"
 
 [deps]
+Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 Markdown = "d6f4376e-aef5-505a-96c1-9c027394607a"
 Mustache = "ffc61752-8dc7-55ee-8c37-f3e9cdd09e70"
 Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"

docs/Project.toml

@@ -1,2 +1,3 @@
 [deps]
 Documenter = "e30172f5-a6a5-5a46-863b-614d45cd2de4"
+Plots = "91a5bcdd-55d7-5caf-9e0b-520d859cae80"

docs/src/index.md

@@ -151,7 +151,7 @@ fillblankq(question, ("lazy", "brown", "sleeping"), 1)
 
 ```@example quiz_question
 question = "The quick brown fox jumped over the ____ dog"
-fillblankq(question, r"lazy")
+fillblankq(question, r"^lazy$")
 ```
 
 ----
@@ -163,10 +163,27 @@ question = "____ ``+ 2  = 4``"
 fillblankq(question, 2)
 ```
 
+### Select from an image question
+
+The `hotspotq` shows an image, specified by a file, and grades an answer correct if a mouse click is in a specified rectangular region. The region is given in terms of lower corner and width/height as if the entire region was in ``[0,1] \times [0,1]``.
+
+```@example quiz_question
+using Plots
+p1 = plot(x -> x^2, axis=nothing, legend=false)
+p2 = plot(x -> x^3, axis=nothing, legend=false)
+p3 = plot(x -> -x^2, axis=nothing, legend=false)
+p4 = plot(x -> -x^3, axis=nothing, legend=false)
+l = @layout [a b; c d]
+p = plot(p1, p2, p3, p4, layout=l)
+imgfile = tempname() * ".png"
+savefig(p, imgfile)
+hotspotq(imgfile, (0,0), (1/2, 1/2),
+    label="What best matches the graph of ``f(x) = -x^4``?")
+```
 
 ## Reference
 
-Currently only a few question types are available:
+The available question types are listed below. If others are desirable, open an issue on the GitHub repository.
 
 ```@docs
 radioq
@@ -178,4 +195,5 @@ matchq
 numericq
 stringq
 fillblankq
+hotspotq
 ```

src/QuizQuestions.jl

@@ -3,6 +3,7 @@ module QuizQuestions
 using Markdown
 using Mustache
 using Random
+using Base64
 
 include("question_types.jl")
 include("html_templates.jl")
@@ -11,6 +12,7 @@ include("show_methods.jl")
 export numericq,
     buttonq, radioq, booleanq, yesnoq,
     multiq,  matchq,
-    stringq, fillblankq
+    stringq, fillblankq,
+    hotspotq
 
 end

src/html_templates.jl

@@ -5,8 +5,16 @@ html_templates = Dict()
 grading_partial = """
   if(correct) {
     msgBox.innerHTML = "<div class='pluto-output admonition note alert alert-success'><span> 👍&nbsp; {{#:CORRECT}}{{{:CORRECT}}}{{/:CORRECT}}{{^:CORRECT}}Correct{{/:CORRECT}} </span></div>";
+    explanation = document.getElementById("explanation_{{:ID}}")
+    if (explanation != null) {
+       explanation.style.display = "none";
+    }
   } else {
     msgBox.innerHTML = "<div class='pluto-output admonition alert alert-danger'><span>👎&nbsp; {{#:INCORRECT}}{{{:INCORRECT}}}{{/:INCORRECT}}{{^:INCORRECT}}Incorrect{{/:INCORRECT}} </span></div>";
+    explanation = document.getElementById("explanation_{{:ID}}")
+    if (explanation != null) {
+       explanation.style.display = "block";
+    }
   }
 """
 
@@ -25,12 +33,13 @@ html_templates["question_tpl"] = mt"""
     {{/:LABEL}}
         <div style="padding-top: 5px">
     {{{:FORM}}}
-    <div id="explanation_{{:ID}}" class='pluto-output admonition alert alert-danger' style="display:none;">{{{:EXPLANATION}}}</div>
     {{^:LABEL}}{{#:HINT}}<label for="controls_{{:ID}}"><span href="#" title='{{{:HINT}}}'>&nbsp;🎁</span></label>{{/:HINT}}{{/:LABEL}}
         </div>
       </div>
-      <div id='{{:ID}}_message' style="padding-bottom: 15px">
-      </div>
+      <div id='{{:ID}}_message' style="padding-bottom: 15px"></div>
+      {{#:EXPLANATION}}
+      <div id="explanation_{{:ID}}" class='pluto-output admonition alert alert-danger' style="display:none;">{{{:EXPLANATION}}}</div>
+      {{/:EXPLANATION}}
     </div>
   </div>
 </form>
@@ -103,7 +112,10 @@ document.querySelectorAll('[id^="button_{{:ID}}_"]').forEach(function(btn) {
 	    this.style.background = "{{{:GREEN}}}";
 	    text = this.innerHTML;
 	    this.innerHTML = "<em>{{{:INCORRECT}}</em>&nbsp;" + text ;
-            document.getElementById("explanation_{{:ID}}").style.display = "block";
+            explanation = document.getElementById("explanation_{{:ID}}")
+            if (explanation != null) {
+               explanation.style.display = "block";
+            }
 	}
 	document.querySelectorAll('[id^="button_{{:ID}}_"]').forEach(function(btn) {
 	    btn.disabled = true;
@@ -211,3 +223,27 @@ html_templates["fill_in_blank_select"] = """
 html_templates["fill_in_blank_input"] = """
 <input id="{{:ID}}" type="{{:TYPE}}" class="form-control" placeholder="{{:PLACEHOLDER}}">
 """
+
+## -------
+html_templates["hotspot"] = """
+<div>
+<img  id="hotspot_{{{:ID}}}" src="data:image/gif;base64,{{{:IMG}}}"/>
+</div>
+"""
+
+html_templates["hotspot_grading_script"] = """
+  document.getElementById("hotspot_{{{:ID}}}").addEventListener("click", function(e) {
+      var u = e.offsetX;
+      var v = e.offsetY;
+      var w = this.offsetWidth;
+      var h = this.offsetHeight
+
+      var x = u/w;
+      var y = (h-v)/h
+
+      correct = {{{:CORRECT_ANSWER}}}
+      var msgBox = document.getElementById('{{:ID}}_message');
+      $(grading_partial)
+
+  })
+"""