plain matching quiz - retry

a34ba682 · Samantha Monty · 5351383b · a34ba682 · a34ba682 · a34ba682
Commit a34ba682 authored Nov 02, 2020 by Samantha Monty
8 changed files
--- a/resource/support/css/_quizzes.scss
+++ b/resource/support/css/_quizzes.scss
@@ -151,14 +151,15 @@ $border-radius: 6px;
        .tooltip  {
            display: block;
            visibility: hidden;
-            max-width: 95%;
+            width: max-content;
+            max-width: -moz-available;
+            max-width: fit-content;
            top: 100%;
            left: 5px;
            background-color: $tooltip;
            color: #fff;
            text-align: center;
-            margin: 5px;
-            padding: 5px;
+            padding: 0.2em;
            border-radius: $border-radius;
            border: none;
            position: absolute;
@@ -200,6 +201,9 @@ $border-radius: 6px;
        // Users may have long tooltips with images
        overflow-y: auto;
        max-height: 80vh;
+        input {
+            margin-right: 0.5em;
+        }
        .solutionDiv {
            background-color: $solution;
            color: $text;
@@ -270,6 +274,9 @@ $border-radius: 6px;
                    }
                }
            }
+            .solutionButton {
+                margin-right: 0.5em;
+            }
        }
    }

@@ -301,6 +308,9 @@ $border-radius: 6px;
                    width: 91%; 
                }
            }
+            select {
+                outline: none;
+            }
        }
    }

@@ -371,8 +381,7 @@ $border-radius: 6px;
            background:#fff;
            cursor: grab;
            object-fit: contain;
-            margin-left: 2px;
-            margin-right: 2px;
+            margin: 0 2px 6px 2px;
            &.show-right {
                background-color: $right;
                border: $border;
@@ -393,33 +402,47 @@ $border-radius: 6px;
            text-align: var(--align-global);
            height: inherit;
            overflow: inherit;
+            .matchDiv {
+                padding: 0.5em;
+                margin: 0.5em 0;
+                border-radius: 7px;
+                width: 100%;
+                border: 1px solid $solution;
+                justify-content: space-between;
+            }
            .matchDiv, 
            .matchItems {
                display: flex;
-                justify-content: start;
            }
            .matchItems {
-                flex-flow: column nowrap;
+                flex-direction: column;
+                justify-content: start;
                counter-reset: item;
                border: none;
-                margin: 2vh 0 0 0;
+                margin: 0;
                max-width: max-content;
-                padding-top: 15px;
                &::before,
                &::after {
                    content: unset;
                    border: none;
                }
            }
+            .matchItems,
+            .buckets {
+                padding: 0 15px 0 0;
+            }
            .matchItem {
                border: none;
-                padding: 0 0 0.5em 0;
+                padding: 0 0 0.3em 0;
                &::before {
                    content: counter(item, upper-latin) ": ";
                    counter-increment: item;
                    margin-right: 0.5em;
                    font-weight:  bold;
                }
+                &:last-of-type {
+                    padding-bottom: 0;
+                }
            }
            .matchQuestion {
                margin-bottom: 1em;
@@ -485,7 +508,7 @@ $border-radius: 6px;
            .options {
                display: none;
                position: absolute;
-                right: 0;
+                right: 0.66em;
                &.shown {
                    display: initial;
                }
@@ -493,15 +516,18 @@ $border-radius: 6px;
                    &::before {
                        color: #f1f1f1;
                    }
-                    &.selected::before {
+                    &.selected::before,
+                    &.selected.correct::before,
+                    &.selected.incorrect::before {
                        color: inherit;
                    }
-                    &.correct {
-                        border: none;
+                    &.correct-notSelected::before {
+                        color: $right;
+                    }
+                    &.correct,
+                    &.correct-notSelected {
                        background-color: $right;
-                        &::before {
-                            color: $green;
-                        } 
+                        border: $border-dotted;
                        &::after {
                            color: $right;
                        }
@@ -509,27 +535,17 @@ $border-radius: 6px;
                    &.incorrect {
                        border: none;
                        background-color: $wrong;
-                        &::before {
-                            color: $red;
-                        }
                        &::after {
                            color: $wrong;
                        }
                    }
-                    &.correct-notSelected {
-                        background-color: $right;
-                        border: $border-dotted;
-                        &::before,
-                        &::after {
-                            color: $right;
-                        }
-                    }
                }
            }
            .buckets {
                display: block;
                border: none;
-                margin: 2vh 0 0 1vw;
+                margin-left: 1vw;
+                width: auto;
                &::before,
                &::after {
                    content: unset;

--- a/resource/support/css/decker.css
+++ b/resource/support/css/decker.css
@@ -587,14 +587,15 @@
 .reveal .quiz-multiple-choice .tooltip {
  display: block;
  visibility: hidden;
-  max-width: 95%;
+  width: max-content;
+  max-width: -moz-available;
+  max-width: fit-content;
  top: 100%;
  left: 5px;
  background-color: #808080;
  color: #fff;
  text-align: center;
-  margin: 5px;
-  padding: 5px;
+  padding: 0.2em;
  border-radius: 6px;
  border: none;
  position: absolute;
@@ -652,6 +653,11 @@
  max-height: 80vh;
 }

+.reveal .qft input,
+.reveal [class*="quiz-f"] input {
+  margin-right: 0.5em;
+}
+
 .reveal .qft .solutionDiv,
 .reveal [class*="quiz-f"] .solutionDiv {
  background-color: #eee;
@@ -749,6 +755,11 @@
  padding: 0 0 0.2em 1em;
 }

+.reveal .qft.plain .solutionButton,
+.reveal [class*="quiz-f"].plain .solutionButton {
+  margin-right: 0.5em;
+}
+
 .reveal .qic,
 .reveal [class*="quiz-i"] {
  overflow-y: auto;
@@ -787,6 +798,11 @@
  width: 91%;
 }

+.reveal .qic.plain select,
+.reveal [class*="quiz-i"].plain select {
+  outline: none;
+}
+
 .reveal .qmi,
 .reveal .quiz-mi,
 .reveal .quiz-match-items {
@@ -879,8 +895,7 @@
  background: #fff;
  cursor: grab;
  object-fit: contain;
-  margin-left: 2px;
-  margin-right: 2px;
+  margin: 0 2px 6px 2px;
 }

 .reveal .qmi .matchItem.show-right,
@@ -917,6 +932,17 @@
  overflow: inherit;
 }

+.reveal .qmi.plain .matchDiv,
+.reveal .quiz-mi.plain .matchDiv,
+.reveal .quiz-match-items.plain .matchDiv {
+  padding: 0.5em;
+  margin: 0.5em 0;
+  border-radius: 7px;
+  width: 100%;
+  border: 1px solid #eee;
+  justify-content: space-between;
+}
+
 .reveal .qmi.plain .matchDiv,
 .reveal .qmi.plain .matchItems,
 .reveal .quiz-mi.plain .matchDiv,
@@ -924,18 +950,17 @@
 .reveal .quiz-match-items.plain .matchDiv,
 .reveal .quiz-match-items.plain .matchItems {
  display: flex;
-  justify-content: start;
 }

 .reveal .qmi.plain .matchItems,
 .reveal .quiz-mi.plain .matchItems,
 .reveal .quiz-match-items.plain .matchItems {
-  flex-flow: column nowrap;
+  flex-direction: column;
+  justify-content: start;
  counter-reset: item;
  border: none;
-  margin: 2vh 0 0 0;
+  margin: 0;
  max-width: max-content;
-  padding-top: 15px;
 }

 .reveal .qmi.plain .matchItems::before, .reveal .qmi.plain .matchItems::after,
@@ -947,11 +972,20 @@
  border: none;
 }

+.reveal .qmi.plain .matchItems,
+.reveal .qmi.plain .buckets,
+.reveal .quiz-mi.plain .matchItems,
+.reveal .quiz-mi.plain .buckets,
+.reveal .quiz-match-items.plain .matchItems,
+.reveal .quiz-match-items.plain .buckets {
+  padding: 0 15px 0 0;
+}
+
 .reveal .qmi.plain .matchItem,
 .reveal .quiz-mi.plain .matchItem,
 .reveal .quiz-match-items.plain .matchItem {
  border: none;
-  padding: 0 0 0.5em 0;
+  padding: 0 0 0.3em 0;
 }

 .reveal .qmi.plain .matchItem::before,
@@ -963,6 +997,12 @@
  font-weight: bold;
 }

+.reveal .qmi.plain .matchItem:last-of-type,
+.reveal .quiz-mi.plain .matchItem:last-of-type,
+.reveal .quiz-match-items.plain .matchItem:last-of-type {
+  padding-bottom: 0;
+}
+
 .reveal .qmi.plain .matchQuestion,
 .reveal .quiz-mi.plain .matchQuestion,
 .reveal .quiz-match-items.plain .matchQuestion {
@@ -1081,7 +1121,7 @@
 .reveal .quiz-match-items.plain .options {
  display: none;
  position: absolute;
-  right: 0;
+  right: 0.66em;
 }

 .reveal .qmi.plain .options.shown,
@@ -1096,28 +1136,36 @@
  color: #f1f1f1;
 }

-.reveal .qmi.plain .options p.selected::before,
+.reveal .qmi.plain .options p.selected::before, .reveal .qmi.plain .options p.selected.correct::before, .reveal .qmi.plain .options p.selected.incorrect::before,
 .reveal .quiz-mi.plain .options p.selected::before,
-.reveal .quiz-match-items.plain .options p.selected::before {
+.reveal .quiz-mi.plain .options p.selected.correct::before,
+.reveal .quiz-mi.plain .options p.selected.incorrect::before,
+.reveal .quiz-match-items.plain .options p.selected::before,
+.reveal .quiz-match-items.plain .options p.selected.correct::before,
+.reveal .quiz-match-items.plain .options p.selected.incorrect::before {
  color: inherit;
 }

-.reveal .qmi.plain .options p.correct,
-.reveal .quiz-mi.plain .options p.correct,
-.reveal .quiz-match-items.plain .options p.correct {
-  border: none;
-  background-color: #aaffaa;
+.reveal .qmi.plain .options p.correct-notSelected::before,
+.reveal .quiz-mi.plain .options p.correct-notSelected::before,
+.reveal .quiz-match-items.plain .options p.correct-notSelected::before {
+  color: #aaffaa;
 }

-.reveal .qmi.plain .options p.correct::before,
-.reveal .quiz-mi.plain .options p.correct::before,
-.reveal .quiz-match-items.plain .options p.correct::before {
-  color: #009900;
+.reveal .qmi.plain .options p.correct, .reveal .qmi.plain .options p.correct-notSelected,
+.reveal .quiz-mi.plain .options p.correct,
+.reveal .quiz-mi.plain .options p.correct-notSelected,
+.reveal .quiz-match-items.plain .options p.correct,
+.reveal .quiz-match-items.plain .options p.correct-notSelected {
+  background-color: #aaffaa;
+  border: 2px dotted #000;
 }

-.reveal .qmi.plain .options p.correct::after,
+.reveal .qmi.plain .options p.correct::after, .reveal .qmi.plain .options p.correct-notSelected::after,
 .reveal .quiz-mi.plain .options p.correct::after,
-.reveal .quiz-match-items.plain .options p.correct::after {
+.reveal .quiz-mi.plain .options p.correct-notSelected::after,
+.reveal .quiz-match-items.plain .options p.correct::after,
+.reveal .quiz-match-items.plain .options p.correct-notSelected::after {
  color: #aaffaa;
 }

@@ -1128,39 +1176,19 @@
  background-color: #ffaaaa;
 }

-.reveal .qmi.plain .options p.incorrect::before,
-.reveal .quiz-mi.plain .options p.incorrect::before,
-.reveal .quiz-match-items.plain .options p.incorrect::before {
-  color: #ff5e5e;
-}
-
 .reveal .qmi.plain .options p.incorrect::after,
 .reveal .quiz-mi.plain .options p.incorrect::after,
 .reveal .quiz-match-items.plain .options p.incorrect::after {
  color: #ffaaaa;
 }

-.reveal .qmi.plain .options p.correct-notSelected,
-.reveal .quiz-mi.plain .options p.correct-notSelected,
-.reveal .quiz-match-items.plain .options p.correct-notSelected {
-  background-color: #aaffaa;
-  border: 2px dotted #000;
-}
-
-.reveal .qmi.plain .options p.correct-notSelected::before, .reveal .qmi.plain .options p.correct-notSelected::after,
-.reveal .quiz-mi.plain .options p.correct-notSelected::before,
-.reveal .quiz-mi.plain .options p.correct-notSelected::after,
-.reveal .quiz-match-items.plain .options p.correct-notSelected::before,
-.reveal .quiz-match-items.plain .options p.correct-notSelected::after {
-  color: #aaffaa;
-}
-
 .reveal .qmi.plain .buckets,
 .reveal .quiz-mi.plain .buckets,
 .reveal .quiz-match-items.plain .buckets {
  display: block;
  border: none;
-  margin: 2vh 0 0 1vw;
+  margin-left: 1vw;
+  width: auto;
 }

 .reveal .qmi.plain .buckets::before, .reveal .qmi.plain .buckets::after,

--- a/resource/support/js/quiz.js
+++ b/resource/support/js/quiz.js
@@ -41,8 +41,8 @@ function quizFT() {
        input.addEventListener("keydown", e => {
            buffer.push(e.key.toLowerCase());
            if (buffer[buffer.length-1] === buffer[buffer.length-2]) { return; };
-            if (e.keyCode === 13) { checkInput() }
-            if (e.keyCode === 8 || e.keyCode === 46) { resetQuestion() }
+            if (e.code === "Enter") { checkInput() };
+            if (e.code === "Backspace" || e.code === "Delete") { resetQuestion() };
        });

        // Check value of input field against solutions
@@ -125,7 +125,7 @@ function quizIC() {
                tipDiv.innerHTML = "";
                sel.classList.add('solved');
                const ind = sel.selectedIndex;
-                const answer = sel.options[ind].innerText;
+                const answer = sel.options[ind].innerText.toLowerCase().trim();
                const checked = checkAnswer(solutionList, answer);

                sel.classList.remove("show-right","show-wrong");
@@ -298,6 +298,7 @@ function buildPlainMatch(question) {

    let allBuckets = buckets.querySelectorAll('.bucket');
    for (let i=0; i<allBuckets.length; i++) {
+        allBuckets[i].removeAttribute('draggable');
        const matchQuestion = document.createElement('div');
        matchQuestion.classList.add('matchQuestion');
        matchItems.appendChild(matchQuestion);
@@ -332,6 +333,8 @@ function buildPlainMatch(question) {
    }
    function makeSelection() {
        let ol = this.parentElement.previousElementSibling;
+        this.classList.remove('correct', 'incorrect', 'correct-notSelected');      // allow multiple attempts to solve
+        this.parentElement.previousElementSibling.classList.remove('correct','incorrect');
        this.classList.toggle('selected');
        if (this.classList.contains('selected')) {
            let cl = this.cloneNode(true);
@@ -365,7 +368,7 @@ function buildPlainMatch(question) {

            let opts = list.nextElementSibling;
            for (let o of opts.children) { 
-                o.removeEventListener('click', makeSelection);
+                // o.removeEventListener('click', makeSelection);
                if (o.getAttribute('data-bucketId') === correct) {
                    allCorrect.push(o.textContent);
                    o.classList.add(o.classList.contains('selected') ? 'correct' : 'correct-notSelected');

--- a/resource/tutorial/05-quiz-deck.md
+++ b/resource/tutorial/05-quiz-deck.md
@@ -88,6 +88,21 @@ topic: Functional Programming Introduction
 ```
 ````

+# Quiz Styling
+
+The default style of Decker quizzes includes drag and drop interactions and decorative coloring. To switch to a plain style, specify the following in the YAML code block, or use the `.plain` tag.
+
+```{.yaml}
+quiz:
+  style: plain
+````
+
+or on a per-question basis:
+
+```{.markdown}
+## {.qmc .plain}
+```
+
 # Matching Questions

 These questions generate quizzes where a user can drag and drop items to sort them into "buckets".
@@ -136,6 +151,25 @@ BucketB
 Empty Bucket
 : !

+# Matching Questions Example - Plain
+
+## Matching Question {.qmi .plain}
+
+Question text
+
+BucketA
+: A1
+: A2
+
+BucketB
+: B1
+
+!
+: Distractor
+
+Empty Bucket
+: !
+
 # Multiple Choice Questions

 Classic multiple choice questions
@@ -157,6 +191,28 @@ Which of these letters is the second in the alphabet?

 Question text

+- [ ] A
+  - nope
+- [X] B
+  - yes
+
+# Multiple Choice Questions Example - Plain {.sub}
+
+## Multiple Choice Question {.qmc .plain}
+
+Question text
+
+- [ ] A
+  - nope
+- [X] B
+  - yes
+
+# Multiple Choice Questions Example - Plain Inline {.sub}
+
+## Multiple Choice Question {.qmc .plain .inline}
+
+Question text
+
 - [ ] A
  - nope
 - [X] B
@@ -199,6 +255,20 @@ is the first letter in the ABC. The second one is
  - yep
 - [ ] C

+# InsertChoices Questions Example Plain {.sub}
+
+## Insert Choices Question {.qic .plain}
+
+- [X] A
+  - of course
+- [ ] B 
+  - uhm ...
+
+is the first letter in the ABC. The second one is
+
+- [X] B
+  - yep
+- [ ] C

 # FreeText questions

@@ -207,7 +277,7 @@ This will create a simple input field/text box where the user can write their an
 If there are wrong answers that are to be expected you can add those by not checking the task box. They will then show as wrong when clicking "Show Solution".

 ```
-## FreeText Question TL {.qft}
+## FreeText Question {.qft}

 What's the first letter in the alphabet?

@@ -226,9 +296,9 @@ What's the fourth letter?

 ```

-# FreeText Question Example without h2 title {.sub}
+# FreeText Question Example {.sub}

-## {.qft}
+## FreeText Question {.qft}

 What's the first letter in the alphabet?

@@ -245,8 +315,22 @@ What's the fourth letter?
  - info
 - [X] D

-```yaml
-lang: en
-```
+# FreeText Question Example - Plain {.sub}

+## FreeText Question {.qft .plain}
+
+What's the first letter in the alphabet?
+
+- [X] A
+  - yep
+- [ ] B
+  - nope
+
+## {.qft .plain}
+
+What's the fourth letter?
+
+- [ ] C
+  - info
+- [X] D

--- a/test/decks/quiz-deck.md
+++ b/test/decks/quiz-deck.md
@@ -5,18 +5,180 @@ lang: de
 ---

 # Overview
+  
+## Add quiz type to level 2 header: 

+```.markdown
+## Question 1 {.qmc}
+```
+
+## {.small}
+
+- Multiple Choice: `.qmc, .quiz-mc, .quiz-multiple-choice`  
+- Matching: `.qmi, .quiz-mi, .quiz-match-items`  
+- Insert: `.qic, .quiz-ic, .quiz-insert-choices`  
+- Free-text: `.qft, .quiz-ft, .quiz-free-text`  
+
+## Styling
+
+To switch all questions to plain style, add to metadata:
+
+```.yaml
+quiz:
+  style: plain
+```
+
+Or to style individual questions, add `{.plain}`
+
+# Multiple Choice
+
+# Mutliple Choice 1 - Fancy
+
+## {.quiz-mc}
+
+All choices get an optional comment to be potentially shown with the result. 
+
+
+- [X] a
+    - So ist das. 
+    - test
+- [ ] b
+    - So nicht. 
+    - Tooltip2
+- [ ] c
+    - So auch nicht
+
+```yaml
+Points: 5
+LectureId: cg1
+TopicId: yeah
+Difficulty: Easy
+```
+
+# Mutliple Choice 2 - Plain
+
+## {.quiz-mc .plain}

+Choices appear in a column. Click the circle to the left of the choice to select. Choices are corrected immediately. A green check will appear in the circle for correct responses, and a red x for incorrect responses. Hover over the circle to see a tooltip. All choices get an optional comment to be potentially shown with the result.