quiz template

.gitignore

@@ -1,4 +1,4 @@
- # Byte-compiled / optimized / DLL files
+# Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
 *$py.class
@@ -174,3 +174,5 @@ spatial_graphs/queen.parquet
 raster_data/population_density.tif
 data/prague_morphology/prg_geometry.gpkg
 data/prague_morphology/prg_primary.csv.gz
+
+/.luarc.json

_extensions/nareal/naquiz/_extension.yml

@@ -0,0 +1,8 @@
+title: naquiz
+author: Nelson Areal
+version: 1.0.4
+quarto-required: ">=1.3.0"
+contributes:
+ filters:
+ - naquiz.lua
+

_extensions/nareal/naquiz/css/buttons.css

@@ -0,0 +1,38 @@
+.btn-group-xs > .btn, .btn-xs {
+ padding: 1px 5px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px;
+}
+
+#correct {
+ color: green;
+}
+
+[id^="no"] {
+ color: red;
+}
+
+.button-clear button {
+ background-color: #f9fafb;
+ border-color: #f9fafb;
+}
+
+
+.button-hint button {
+ background-color: #FFFAA0;
+ border-color: #FFFAA0;
+}
+
+.button-hint .border-warning {
+ border-color: #FFFAA0 !important;
+}
+
+.button-answer button {
+ background-color: #e7f1ff;
+ border-color: #e7f1ff;
+}
+
+.button-answer .border-info {
+ border-color: #e7f1ff !important;
+}

_extensions/nareal/naquiz/js/LICENSE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright © 2019-2021 Caleb Porzio and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

_extensions/nareal/naquiz/naquiz.lua

@@ -0,0 +1,168 @@
+-- environment.lua
+
+local function button_clear(div, defaultTitle, defaultClass, borderColor)
+ local beginDiv = ""
+ local buttonClass = div.attr.attributes['button-class']
+
+ -- quarto.log.output("=== button-clear ===")
+ -- quarto.log.output(div)
+
+ beginDiv = beginDiv .. "<button x-on:click='clear()'"
+ if buttonClass then
+ beginDiv = beginDiv .. 'class=' .. "'" .. buttonClass .. "'" .. '>'
+ else
+ beginDiv = beginDiv .. 'class=' .. "'" .. defaultClass .. "'" .. '>'
+ end
+
+ local title = div.attr.attributes['title']
+ if title then
+ beginDiv = beginDiv .. title
+ else
+ beginDiv = beginDiv .. defaultTitle
+ end
+ beginDiv = beginDiv .. "</button>\n"
+
+ if borderColor == nil then
+ borderColor = "card card-body"
+ else
+ borderColor = "card card-body " .. borderColor
+ end
+
+ local endDiv = "\n"
+
+ table.insert(div.content, pandoc.RawBlock('html', beginDiv))
+ table.insert(div.content, pandoc.RawBlock('html', endDiv))
+
+ -- quarto.log.output("=== \n\n\n\n")
+ -- quarto.log.output(div)
+
+ return div
+end
+
+
+local function button(div, defaultTitle, defaultClass, borderColor)
+ local beginDiv = "<div x-data='{ open: false }'>\n"
+ local buttonClass = div.attr.attributes['button-class']
+ beginDiv = beginDiv .. "<button x-on:click='open = ! open'"
+ if buttonClass then
+ beginDiv = beginDiv .. 'class=' .. "'" .. buttonClass .. "'" .. '>'
+ else
+ beginDiv = beginDiv .. 'class=' .. "'" .. defaultClass .. "'" .. '>'
+ end
+
+ local title = div.attr.attributes['title']
+ if title then
+ beginDiv = beginDiv .. title
+ else
+ beginDiv = beginDiv .. defaultTitle
+ end
+ beginDiv = beginDiv .. "</button>\n"
+
+ if borderColor == nil then
+ borderColor = "card card-body"
+ else
+ borderColor = "card card-body " .. borderColor
+ end
+
+ beginDiv = beginDiv ..
+ "<div x-show='open' x-transition.duration.200ms x-on:click.outside='open = false' class='" ..
+ borderColor .. "'" .. ">"
+ local endDiv = "</div>\n</div>\n"
+
+ table.insert(div.content, 1, pandoc.RawBlock('html', beginDiv))
+ table.insert(div.content, pandoc.RawBlock('html', endDiv))
+ -- quarto.log.output(div)
+ return div
+end
+
+
+local function choice(blocks, correct, idx)
+ local htmlStart = ''
+
+ if correct == true then
+ htmlStart = htmlStart ..
+ '<p><input class="form-check-input" type="radio" x-model="answer" value="correct"> <span id="correct" x-show="answer == $el.id" class="badge">&#10003;</span>'
+ else
+ htmlStart = htmlStart ..
+ '<p><input class="form-check-input" type="radio" x-model="answer" value="no' ..
+ idx .. '"> <span id="no' .. idx .. '" x-show="answer == $el.id" class="badge">&#10007;</span>'
+ end
+ table.insert(blocks[1].content, 1, pandoc.RawInline('html', htmlStart))
+ table.insert(blocks[1].content, pandoc.RawInline('html', '</p>'))
+
+ return blocks
+end
+
+
+local function choices(div)
+ local correct = false
+ if div.tag == "Div" then
+ if div.attr.classes:includes("choices") then
+ for idx, subDiv in ipairs(div.content) do
+ if subDiv.attr.classes:includes("choice") then
+ if subDiv.attr.classes:includes("correct-choice") then
+ correct = true
+ else
+ correct = false
+ end
+ choice(subDiv.content, correct, idx)
+ end
+ if subDiv.attr.classes:includes("button-clear") then
+ -- quarto.log.output("=== button-clear ===")
+ -- quarto.log.output(subDiv)
+ button_clear(subDiv, "Clear answer", "btn btn-light")
+ end
+ end
+ table.insert(div.content, 1,
+ pandoc.RawBlock('html',
+ '<div x-data="{ answer: \'\' , clear() { this.answer = \'\' }}">\n'))
+ table.insert(div.content, pandoc.RawBlock('html', '</div>\n'))
+ end
+ end
+ return div
+end
+
+
+local function question(div)
+ for idx, blocks in ipairs(div) do
+ if blocks.tag == "Div" then
+ choices(blocks)
+ end
+ end
+
+ return div
+end
+
+
+
+local function writeEnvironments(div)
+ if quarto.doc.is_format("html") then
+ quarto.doc.add_html_dependency({
+ name = "alpine",
+ version = "3.12",
+ scripts = {
+ { path = "js/alpine@3.12.min.js", afterBody = "true" } },
+ stylesheets = { "css/buttons.css" }
+ })
+ if div.attr.classes:includes("question") then
+ -- quarto.log.output("=== question ===")
+ -- quarto.log.output(div)
+ div.content = question(div.content)
+ end
+ if div.attr.classes:includes("button-hint") then
+ div = button(div, "Hint", "btn btn-warning", "border-warning")
+ -- quarto.log.output("=== button-hint ===")
+ end
+ if div.attr.classes:includes("button-answer") then
+ div = button(div, "Answer", "btn btn-info", "border-info")
+ -- quarto.log.output("=== button-answer ===")
+ end
+ return (div)
+ end
+end
+
+-- Run in two passes so we process metadata
+-- and then process the divs
+return {
+ { Div = writeEnvironments }
+}

introduction/quiz.qmd

@@ -0,0 +1,59 @@
+---
+title: "Quiz on Jupyter and Markdown"
+filters:
+ - naquiz
+---
+
+Check how much you remember from previous sections by answering the questions below.
+
+:::::{.question}
+What would be the effect of the following Markdown syntax `***Markdown***`?
+
+::::{.choices}
+
+:::{.choice}
+**Markdown**
+:::
+
+:::{.choice}
+*Markdown*
+:::
+
+:::{.choice .correct-choice}
+***Markdown***
+:::
+
+:::{.choice}
+~~Markdown~~
+:::
+
+::::
+:::::
+
+:::::{.question}
+Can you use the `_` and `*` symbols interchangeably?
+
+::::{.choices}
+
+:::{.choice}
+Yes. Both of them have the same same effect.
+:::
+
+:::{.choice .correct-choice}
+Yes, as long as you use the same to mark start and end of the sequence..
+:::
+
+:::{.choice}
+No. They mean the same but only one can be used in a document.
+:::
+
+:::{.choice}
+No. Only one is valid Markdown.
+:::
+
+:::{.choice}
+No. They have a different meaning.
+:::
+
+::::
+:::::