Merge pull request #49 from trevorgunn/scriptq-function

Add question type checked by JavaScript functions

README.md

@@ -2,7 +2,7 @@
 
 [![](https://img.shields.io/badge/docs-dev-blue.svg)](https://jverzani.github.io/QuizQuestions.jl/dev/)
 
-A simple means to make basic web pages using Markdown with self-grading quiz questions. Question types are for numeric response, text response (graded with a regular expression), matching, a selection of one from many, or one or more from many. Can be used with Weave, Documenter, [quarto](https://quarto.org), or Pluto.
+A simple means to make basic web pages using Markdown with self-grading quiz questions. Question types are for numeric response, text response (graded with a regular expression or by JavaScript function), matching, a selection of one from many, or one or more from many. Can be used with Weave, Documenter, [quarto](https://quarto.org), or Pluto.
 
 
 The package creates `show` methods for mime type `text/html` for a few objects that produce HTML showing an input widget with attached javascript code to grade the input once the widget loses focus.

docs/src/index.md

@@ -189,6 +189,15 @@ fillblankq(question, r"^lazy$")
 
 ----
 
+(like `scriptq`)
+
+```@example quiz_question
+funct = "(input) => input >= 42"
+scriptq(funct, label="a large number", explanation="should be at least 6 * 7")
+```
+
+----
+
 (like `numericq`)
 
 ```@example quiz_question
@@ -235,6 +244,7 @@ multibuttonq
 matchq
 numericq
 stringq
+scriptq
 fillblankq
 hotspotq
 plotlylightq

examples/documenter.md

@@ -12,6 +12,13 @@ re = Regex("abc")  # hide
 stringq(re)  # hide
 ```
 
+Enter a large number
+
+```@example quiz
+funct = "(input) => input >= 42"
+scriptq(funct, explanation="should be at least 6 * 7")
+```
+
 What is ``\sin(\frac{\pi}{2})``?
 
 ```@example quiz

examples/quarto.qmd

@@ -14,6 +14,14 @@ re = Regex("abc")
 stringq(re)
 ```
 
+Enter a large number
+
+```{julia}
+#| echo: false
+funct = "(input) => input >= 42"
+scriptq(funct, explanation="should be at least 6 * 7")
+```
+
 ```{julia}
 #| echo: false
 a = 1

examples/weave.jmd

@@ -11,7 +11,12 @@ re = Regex("abc")
 stringq(re)
 ```
 
+Enter a large number
 
+```julia; echo=false
+funct = "(input) => input >= 42"
+scriptq(funct, explanation="should be at least 6 * 7")
+```
 
 ```julia; echo=false
 a = 1

src/QuizQuestions.jl

@@ -13,7 +13,7 @@ include("latex_show_methods.jl")
 export numericq,
     buttonq, radioq, booleanq, yesnoq,
     multiq,  multibuttonq, matchq,
-    stringq, fillblankq,
+    stringq, scriptq, fillblankq,
     hotspotq, plotlylightq,
     scorecard
 

src/html_templates.jl

@@ -84,6 +84,15 @@ document.getElementById("{{:ID}}").addEventListener("change", function() {
 });
 """
 
+##
+html_templates["function_grading_script"] = jmt"""
+document.getElementById("{{:ID}}").addEventListener("change", function() {
+  var correct = ({{{:FUNCTION}}})(this.value);
+  var msgBox = document.getElementById('{{:ID}}_message');
+  $(grading_partial)
+});
+"""
+
 ##
 html_templates["inputq_form"] = mt"""
 </br>

src/question_types.jl

@@ -36,6 +36,49 @@ stringq(re, label="First 3 letters...")
 stringq(re::Regex; label="", hint="", explanation="",  placeholder=nothing) =
     Stringq(re, label, hint, explanation, placeholder)
 
+##
+mutable struct Scriptq <: Question
+    funct::AbstractString
+    label
+    hint
+    explanation
+    placeholder
+end
+
+"""
+    scriptq(funct::AbstractString, runonce::AbstractString=""; label="", hint="", explanation="", placeholder="")
+
+Check string answer with custom script
+
+Arguments:
+
+* `funct`: a string representing the name of a JavaScript function/closure of signature `(str: string): boolean`
+
+* `label`: optional label for the form element
+
+* `hint`: optional plain-text hint that can be seen on hover
+
+* `explanation`: text to display on a wrong selection
+
+* `placeholder`: text shown when input widget is initially drawn
+
+## Example
+
+```javascript
+// in JavaScript
+function threshold(t) {
+    return (input) => input >= t;
+}
+```
+
+```julia
+# in Julia
+stringq("threshold(42)", label="A large number")
+```
+
+"""
+scriptq(funct::AbstractString; label="", hint="", explanation="",  placeholder=nothing) =
+    Scriptq(funct, label, hint, explanation, placeholder)
 
 ##
 mutable struct Numericq <: Question

src/show_methods.jl

@@ -89,6 +89,25 @@ function prepare_question(x::Stringq, ID)
 
 end
 
+function prepare_question(x::Scriptq, ID)
+
+    FORM = Mustache.render(html_templates["inputq_form"];
+                           ID=ID,
+                           PLACEHOLDER = isnothing(x.placeholder) ? "Text answer" : x.placeholder,
+                           TYPE="text",
+                           HINT = length(x.label) == 0 ? x.hint : ""
+                           )
+
+    GRADING_SCRIPT =
+        Mustache.render(html_templates["function_grading_script"];
+                        ID = ID,
+                        FUNCTION = x.funct,
+                        INCORRECT = "Incorrect",
+                        CORRECT = "Correct"
+                        )
+    (FORM, GRADING_SCRIPT)
+
+end
 
 function _make_item(i, choice, ID)
     choice′ = sprint(io -> Markdown.html(io, Markdown.parse(choice)))