Skip to content

Commit

Permalink
Merge pull request #54 from jverzani/qqclass
Browse files Browse the repository at this point in the history 
Add qq* classes; configure buttonq colors
  • Loading branch information
@jverzani
jverzani authored Nov 17, 2024
2 parents 4f0c65a + b923321 commit 1946003
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 53 deletions.
2 changes: 1 addition & 1 deletion Project.toml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name = "QuizQuestions"
uuid = "612c44de-1021-4a21-84fb-7261cf5eb2d4"
authors = ["jverzani <[email protected]> and contributors"]
version = "0.3.24"
version = "0.3.25"

[deps]
Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
Expand Down
163 changes: 115 additions & 48 deletions src/html_templates.jl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,39 @@ html_templates = Dict()

# code to support scorecard widget
scorecard_correct_partial = """
const correct_answer = new CustomEvent("quizquestion_answer", {bubbles:true, detail:{correct: 1}});
const correct_answer = new CustomEvent("quizquestion_answer",
{bubbles:true, detail:{correct: 1}}
);
this.dispatchEvent(correct_answer);
//typeof correct_answer != "undefined" && this.dispatchEvent(correct_answer);
"""

scorecard_incorrect_partial = """
const incorrect_answer = new CustomEvent("quizquestion_answer", {bubbles:true, detail:{correct: 0}});
const incorrect_answer = new CustomEvent("quizquestion_answer",
{bubbles:true, detail:{correct: 0}}
);
this.dispatchEvent(incorrect_answer);
//typeof incorrect_answer != "undefined" && this.dispatchEvent(incorrect_answer);
"""

# thumbs up/down don't show in my editor
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>";
msgBox.innerHTML = "<div class='pluto-output admonition note alert alert-success'> \
<span>✔&nbsp; \
{{#:CORRECT}}{{{:CORRECT}}}{{/:CORRECT}}{{^:CORRECT}}Correct{{/:CORRECT}} \
</span> \
</div>";
var explanation = document.getElementById("explanation_{{:ID}}")
if (explanation != null) {
explanation.style.display = "none";
}
$(scorecard_correct_partial)
} else {
msgBox.innerHTML = "<div class='pluto-output admonition alert alert-danger'><span>👎&nbsp; {{#:INCORRECT}}{{{:INCORRECT}}}{{/:INCORRECT}}{{^:INCORRECT}}Incorrect{{/:INCORRECT}} </span></div>";
msgBox.innerHTML = "<div class='pluto-output admonition alert alert-danger'> \
<span>Χ&nbsp; \
{{#:INCORRECT}}{{{:INCORRECT}}}{{/:INCORRECT}}{{^:INCORRECT}}Incorrect{{/:INCORRECT}} \
</span> \
</div>";
var explanation = document.getElementById("explanation_{{:ID}}")
if (explanation != null) {
explanation.style.display = "block";
Expand All @@ -42,25 +52,39 @@ html_templates["question_tpl"] = mt"""
<script>
var ID = "{{:ID}}"
</script>
<form class="mx-2 my-3 mw-100" name='WeaveQuestion' data-id='{{:ID}}' data-controltype='{{:TYPE}}' onSubmit='return false;'>
<form class="mx-2 my-3 mw-100 qqquestion"
name='WeaveQuestion'
data-id='{{:ID}}'
data-controltype='{{:TYPE}}'
onSubmit='return false;'
>
<div class='form-group {{:STATUS}}'>
<div class='controls'>
<div class="form" id="controls_{{:ID}}" correct='-1' attempts='0'>
{{#:LABEL}}
{{{:LABEL}}}
{{#:HINT}}<span href="#" title="{{{:HINT}}}">&nbsp;🎁</span>{{/:HINT}}
{{#:HINT}}<span href="#" title="{{{:HINT}}}">&nbsp;🎁</span>{{/:HINT}}
{{/:LABEL}}
<div style="padding-top: 5px">
<div style="padding-top: 5px">
{{{:FORM}}}
{{^: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>
{{#:EXPLANATION}}
<div id="explanation_{{:ID}}" class='pluto-output admonition alert alert-danger' style="display:none;;background-color:#D3D3D366;">{{{:EXPLANATION}}}</div>
{{/:EXPLANATION}}
{{^:LABEL}}
{{#:HINT}}<label for="controls_{{:ID}}"><span href="#" title="{{{:HINT}}}">&nbsp;🎁</span></label>
{{/:HINT}}
{{/:LABEL}}
</div>
</div>
<div id='{{:ID}}_message'
class='qqmessage'
style="padding-bottom: 15px">
{{#:EXPLANATION}}
<div id="explanation_{{:ID}}"
class='pluto-output admonition alert alert-danger qqexplanation'
style="display:none;background-color:{{:EXPLANATION_BG}};">
{{{:EXPLANATION}}}
</div>
{{/:EXPLANATION}}
</div>
</div>
</form>
<script>
document.getElementById('controls_{{:ID}}').addEventListener("quizquestion_answer", (e) => {
Expand Down Expand Up @@ -96,13 +120,20 @@ document.getElementById("{{:ID}}").addEventListener("change", function() {
##
html_templates["inputq_form"] = mt"""
</br>
<div class="input-group" aria-label="Input form: {{:PLACEHOLDER}}">
<input id="{{:ID}}" type="{{:TYPE}}" class="form-control" placeholder="{{:PLACEHOLDER}}" aria-label="{{:PLACEHOLDER}}">
<div class="input-group"
aria-label="Input form: {{:PLACEHOLDER}}">
<input id="{{:ID}}"
type="{{:TYPE}}"
class="form-control qqinput"
placeholder="{{:PLACEHOLDER}}"
aria-label="{{:PLACEHOLDER}}">
{{#:UNITS}}
<span class="input-group-append">&nbsp;{{{:UNITS}}}&nbsp;</span>
{{/:UNITS}}
{{#:HINT}}
<span class="input-group-append" href="#" title="{{{:HINT}}}">&nbsp;🎁</span>
<span class="input-group-append"
href="#"
title="{{{:HINT}}}">&nbsp;🎁</span>
{{/:HINT}}
</div>
"""
Expand All @@ -113,16 +144,21 @@ html_templates["inputq_form"] = mt"""
## We do *not* use sibling elements, as suggested by Bootstrap here
html_templates["Radioq"] = mt"""
<fieldset style="border:0px">
<legend style="display: none" aria-label="Select an item">Select an item</legend>
<legend style="display: none"
aria-label="Select an item">Select an item</legend>
{{#:ITEMS}}
<div class="form-check">
<label class="form-check-label" for="radio_{{:ID}}_{{:VALUE}}">
<input class="form-check-input" type="radio" name="radio_{{:ID}}"
id="radio_{{:ID}}_{{:VALUE}}" value="{{:VALUE}}">
</input>
<span class="label-body px-1">
<label class="form-check-label qqradio"
for="radio_{{:ID}}_{{:VALUE}}">
<input class="form-check-input"
type="radio"
name="radio_{{:ID}}"
id="radio_{{:ID}}_{{:VALUE}}"
value="{{:VALUE}}">
</input>
<span class="label-body px-1">
{{{:LABEL}}}
</span>
</span>
</label>
</div>
{{/:ITEMS}}
Expand All @@ -139,9 +175,16 @@ rb.addEventListener("change", function() {
"""
## ----
html_templates["Buttonq"] = jmt"""
<div id="buttongroup_{{:ID}}" class="btn-group-vertical w-100">
<div id="buttongroup_{{:ID}}"
class="btn-group-vertical w-100">
{{#:BUTTONS}}
<button type="button" class="btn toggle-btn px-4 my-1 btn-light btn-block active" aria-pressed="false" id="button_{{:ID}}_{{:i}}" value="{{:ANSWER}}" style="width:100%;text-align:left; padding-left:10px; {{#:BLUE}}background:{{{:BLUE}}}{{/:BLUE}}" onclick="return false;">
<button type="button"
class="btn toggle-btn px-4 my-1 btn-light btn-block active qqbutton"
aria-pressed="false"
id="button_{{:ID}}_{{:i}}"
value="{{:ANSWER}}"
style="width:100%;text-align:left; padding-left:10px; {{#:BLUE}}background:{{{:BLUE}}}{{/:BLUE}}"
onclick="return false;">
{{{:TEXT}}
</button>
{{/:BUTTONS}}
Expand All @@ -154,7 +197,7 @@ document.querySelectorAll('[id^="button_{{:ID}}_"]').forEach(function(btn) {
if (!correct) {
$(scorecard_incorrect_partial)
{{#:GREEN}}this.style.background = "{{{:GREEN}}}";{{/:GREEN}}
{{#:RED}}this.style.background = "{{{:RED}}}";{{/:RED}}
var text = this.innerHTML;
this.innerHTML = "<em>{{{:INCORRECT}}</em>&nbsp;" + text ;
var explanation = document.getElementById("explanation_{{:ID}}")
Expand All @@ -168,7 +211,7 @@ document.querySelectorAll('[id^="button_{{:ID}}_"]').forEach(function(btn) {
btn.disabled = true;
btn.setAttribute("aria-pressed", "true");
if (btn.value == "correct") {
{{#:RED}}btn.style.background = "{{{:RED}}}";{{/:RED}}
{{#:GREEN}}btn.style.background = "{{{:GREEN}}}";{{/:GREEN}}
var text = btn.innerHTML;
btn.innerHTML = " <em>{{{:CORRECT}}}</em>&nbsp;" + text ;
btn.style.fontSize = "1.1rem";
Expand All @@ -187,8 +230,11 @@ html_templates["Multiq"] = mt"""
{{#:ITEMS}}
<div class="form-check">
<label>
<input class="form-check-input" type="checkbox" name="check_{{:ID}}"
id="check_{{:ID}}_{{:VALUE}}" value="{{:VALUE}}">
<input class="form-check-input qqmulti"
type="checkbox"
name="check_{{:ID}}"
id="check_{{:ID}}_{{:VALUE}}"
value="{{:VALUE}}">
<span class="label-body">
{{{:LABEL}}}
</span>
Expand Down Expand Up @@ -218,17 +264,25 @@ rb.addEventListener("change", function() {
"""

html_templates["MultiButtonq"] = mt"""
<div id="buttongroup_{{:ID}}" class="btn-group-vertical w-100">
<div id="buttongroup_{{:ID}}"
class="btn-group-vertical w-100">
{{#:BUTTONS}}
<button type="button" class="btn toggle-btn px-4 my-1 btn-light btn-block active" aria-pressed="false"
id="button_{{:ID}}_{{:i}}" name="{{:i}}" value="unclicked"
style="width:100%;text-align:left; padding-left:10px; {{#:BLUE}}background:{{{:BLUE}}}{{/:BLUE}}" onclick="return false;">
{{{:TEXT}}
<button type="button"
class="btn toggle-btn px-4 my-1 btn-light btn-block active qqmultibutton"
aria-pressed="false"
id="button_{{:ID}}_{{:i}}"
name="{{:i}}"
value="unclicked"
style="width:100%;text-align:left; padding-left:10px; {{#:BLUE}}background:{{{:BLUE}}}{{/:BLUE}}"
onclick="return false;">
{{{:TEXT}}
</button>
{{/:BUTTONS}}
<div class="col mt-1 align-self-center">
<button id="button_{{:ID}}-done" class="btn btn-primary"
style="display:block; margin:auto;text-align:center;{{#:BLUE}}background:{{{:BLUE}}}{{/:BLUE}}" onclick="return false;">
<button id="button_{{:ID}}-done"
class="btn btn-primary"
style="display:block; margin:auto;text-align:center;{{#:BLUE}}background:{{{:BLUE}}}{{/:BLUE}}"
onclick="return false;">
DONE
</button>
</div>
Expand Down Expand Up @@ -299,11 +353,13 @@ html_templates["Matchq"] = mt"""
{{#:ITEMS}}
<div>
<select name = "select_{{:ID}}" id="select_{{:ID}}" aria-label="Select one">
<select name="select_{{:ID}}"
id="select_{{:ID}}"
aria-label="Select one">
<option value=0 selected="selected">{{{:BLANK}}}</option>
{{#:ANSWER_CHOICES}}
<option value="{{:INDEX}}">{{{:LABEL}}}</option>
{{/:ANSWER_CHOICES}}
{{/:ANSWER_CHOICES}}
</select>
</div>
<div>{{{:QUESTION}}}</div>
Expand Down Expand Up @@ -335,25 +391,36 @@ html_templates["matchq_grading_script"] = """
## ----

html_templates["fill_in_blank_select"] = """
<select name = "select_{{:ID}}" id="select_{{:ID}}" aria-label"Make a selection">
<option value="0" selected="selected">{{{:BLANK}}}</option>
<select name="select_{{:ID}}"
id="select_{{:ID}}"
aria-label="Make a selection"> TTT
<option value="0"
selected="selected">{{{:BLANK}}}</option>
{{#:ANSWER_CHOICES}}
<option value="{{:INDEX}}">{{{:LABEL}}}</option>
{{/:ANSWER_CHOICES}}
</select>
<label for="select_{{:ID}}" style="left: -100vw; position: absolute;">Make a selection</label>
<label for="select_{{:ID}}"
style="left: -100vw; position: absolute;">Make a selection</label>
"""

html_templates["fill_in_blank_input"] = """
<input id="{{:ID}}" type="{{:TYPE}}" class="form-{{^:INLINE}}control{{/:INLINE}}" placeholder="{{:PLACEHOLDER}}" aria-label="Fill in the blank">
<label for="{{:ID}}" style="left: -100vw; position: absolute;">Fill in the blank</label>
<input id="{{:ID}}"
type="{{:TYPE}}"
class="form-{{^:INLINE}}control{{/:INLINE}} qqfillinblank"
placeholder="{{:PLACEHOLDER}}"
aria-label="Fill in the blank">
<label for="{{:ID}}"
style="left: -100vw; position: absolute;">Fill in the blank</label>
"""


## -------
html_templates["hotspot"] = """
<div aria-label="Hotspot question for selection from an image">
<img id="hotspot_{{{:ID}}}" alt="Image for hotspot selection" src="data:image/gif;base64,{{{:IMG}}}" />
<img id="hotspot_{{{:ID}}}"
alt="Image for hotspot selection"
src="data:image/gif;base64,{{{:IMG}}}" />
</div>
"""

Expand Down
16 changes: 13 additions & 3 deletions src/question_types.jl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,17 @@ mutable struct Buttonq <: Question
colors
end

const old_colors = (GREEN="#FF0000AA",
RED = "#00AA33AA",
BLUE = nothing)

#https://github.com/JuliaLang/julia-logo-graphics/blob/master/images/julia-colors.svg
#https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
const julia_colors = (GREEN="#3898261A",
RED = "#CB3C331A",
BLUE = "#4063D81A",
PURPLE = "#9558B21A")
#D3D3D366 was this bg color
"""
buttonq(choices, answer; label="", hint="", [colors])
Expand All @@ -209,6 +220,7 @@ Arguments:
* `explanation`: text to display on a wrong selection
* `colors` a named tuple with colors for `GREEN`, `RED`, and `BLUE`
## Example:
Expand All @@ -222,9 +234,7 @@ buttonq(choices, answer; label="Which is the Greek symbol?",
"""
function buttonq(choices, answer::Integer;
label="", hint="", explanation="",
colors=(GREEN="#FF0000AA",
RED = "#00AA33AA",
BLUE = nothing) #"#0033CC11",
colors=julia_colors
)

answers = [i == answer ? "correct" : "incorrect" for i ∈ eachindex(choices)]
Expand Down
3 changes: 2 additions & 1 deletion src/show_methods.jl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function _markdown_to_html(x)
length(x) == 0 && return("")
x = Markdown.parse(x)
x = sprint(io -> Markdown.html(io, x))
x = replace(x, r"\n<p>"=>" ", r"</p>$"=>" ")
x = replace(x, r"<p>"=>" ", r"</p>$"=>" ")
return x
end

Expand All @@ -42,6 +42,7 @@ function Base.show(io::IO, m::MIME"text/html", x::Question)
LABEL=_markdown_to_html(x.label),
HINT = length(x.label) > 0 ? x.hint : "",
EXPLANATION = _markdown_to_html(x.explanation),
EXPLANATION_BG = julia_colors.PURPLE, #"#D39558B2", TODO: confiugrable
FORM = FORM,
GRADING_SCRIPT = GRADING_SCRIPT
)
Expand Down

2 comments on commit 1946003

@jverzani
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JuliaRegistrator register

@JuliaRegistrator
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Registration pull request created: JuliaRegistries/General/119628

Tip: Release Notes

Did you know you can add release notes too? Just add markdown formatted text underneath the comment after the text
"Release notes:" and it will be added to the registry PR, and if TagBot is installed it will also be added to the
release that TagBot creates. i.e.

@JuliaRegistrator register

Release notes:

## Breaking changes

- blah

To add them here just re-invoke and the PR will be updated.

Tagging

After the above pull request is merged, it is recommended that a tag is created on this repository for the registered package version.

This will be done automatically if the Julia TagBot GitHub Action is installed, or can be done manually through the github interface, or via:

git tag -a v0.3.25 -m "<description of version>" 19460036ec90078704dd2baaa26d28df19049161
git push origin v0.3.25

Please sign in to comment.