Commit a34ba682 authored by Samantha Monty's avatar Samantha Monty

plain matching quiz - retry

parent 5351383b
......@@ -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;
......
......@@ -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,
......
......@@ -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');
......
......@@ -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
......@@ -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.