Skip to content

Commit

Permalink
https://github.com/elmsln/issues/issues/1334
Browse files Browse the repository at this point in the history
  • Loading branch information
@btopro
btopro committed May 10, 2024
1 parent 6c20c05 commit 1a6d2ec
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 252 deletions.
130 changes: 77 additions & 53 deletions elements/multiple-choice/lib/QuestionElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,14 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
}
return gotRight;
}

makeItRain() {
import("./confetti-container.js").then((module) => {
setTimeout(() => {
this.shadowRoot.querySelector("#confetti").setAttribute("popped", "");
}, 0);
});
}
/**
* Verify the answers of the user based on their saying
* that they want to see how they did.
Expand Down Expand Up @@ -174,12 +182,7 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
this.__toastColor = "green";
this.__toastIcon = this.correctIcon;
this.__toastText = this.correctText;
// make it fun... and performant!
import("./confetti-container.js").then((module) => {
setTimeout(() => {
this.shadowRoot.querySelector("#confetti").setAttribute("popped", "");
}, 0);
});
this.makeItRain();
extras.hat = "party";
} else {
this.__toastColor = "red";
Expand Down Expand Up @@ -548,7 +551,10 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
if (node.answers) {
// ensure this is null before generating new answers
// otherwise page to page saves we could lose statefulness
this.innerHTML = "";
let inputs = Array.from(this.querySelectorAll("input:not([slot])"));
for (var i in inputs) {
inputs[i].remove();
}
for (var i in node.answers) {
if (node.answers[i]) {
let answer = document.createElement("input");
Expand Down Expand Up @@ -596,32 +602,14 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
<grid-plate layout="1-1">
<div slot="col-1">
<h3 property="oer:name">${this.question}</h3>
<fieldset class="options">
${this.displayedAnswers.map(
(answer, index) => html`
<simple-fields-field
type="${this.singleOption ? "radio" : "checkbox"}"
?disabled="${this.disabled}"
property="oer:answer"
name="${index}"
@mousedown="${this.clickSingle}"
@keydown="${this.clickSingle}"
.value="${answer ? answer.userGuess : ""}"
@value-changed="${this.checkedEvent}"
label="${answer && answer.label ? answer.label : ""}"
></simple-fields-field>
`,
)}
</fieldset>
${this.renderInteraction()}
${!this.hideButtons ? this.renderButtons() : ``}
</div>
<div slot="col-2">
<details ?open="${!this.hasContent}" id="directions">
<summary>Directions</summary>
<div>
<p>Select the answers you feel satsisfy the question. When you are done, select <strong>${this.t.checkAnswer}</strong>.
You will get feedback just below here indicating correctness of your answer and how to proceed.
</p>
${this.renderDirections()}
</div>
</details>
${this.hasContent ? html`
Expand All @@ -634,29 +622,7 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
<details tabindex="${!this.showAnswer ? "-1" : ""}" ?disabled="${!this.showAnswer}" ?open="${this.showAnswer}">
<summary id="feedback">Feedback</summary>
<div>
${this.showAnswer && !this.isCorrect() ? html`
<p class="feedback">${this.incorrectText}</p>
${this.hasFeedbackIncorrect ? html`<slot name="feedbackIncorrect"></slot>` : ``}` : ``}
${this.showAnswer && this.isCorrect() ? html`
<p class="feedback">${this.correctText}</p>
${this.hasFeedbackCorrect ? html`<slot name="feedbackCorrect"></slot>` : ``}` : ``}
${this.hasHint && this.showAnswer && !this.isCorrect() ? html`
<h4>Need a hint?</h4>
<div>
<slot name="hint"></slot>
</div>
` : ``}
${this.hasEvidence && this.showAnswer && this.isCorrect() ? html`
<h4>Evidence</h4>
<div>
<slot name="evidence"></slot>
</div>
` : ``}
<simple-toolbar-button
?disabled="${this.disabled || !this.showAnswer}"
@click="${this.resetAnswer}"
label="${this.t.tryAgain}">
</simple-toolbar-button>
${this.renderFeedback()}
</div>
</details>
</div>
Expand All @@ -665,6 +631,28 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
`;
}

renderInteraction() {
return html`
<fieldset class="options">
${this.displayedAnswers.map(
(answer, index) => html`
<simple-fields-field
type="${this.singleOption ? "radio" : "checkbox"}"
?disabled="${this.disabled}"
property="oer:answer"
name="${index}"
@mousedown="${this.clickSingle}"
@keydown="${this.clickSingle}"
.value="${answer ? answer.userGuess : ""}"
@value-changed="${this.checkedEvent}"
label="${answer && answer.label ? answer.label : ""}"
></simple-fields-field>
`,
)}
</fieldset>
`;
}

renderButtons() {
return html`
<div id="buttons">
Expand All @@ -686,6 +674,40 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
`;
}

renderDirections() {
return html`<p>Select the answers you feel satsisfy the question. When you are done, select <strong>${this.t.checkAnswer}</strong>.
You will get feedback just below here indicating correctness of your answer and how to proceed.
</p>`;
}

renderFeedback() {
return html`
${this.showAnswer && !this.isCorrect() ? html`
<p class="feedback">${this.incorrectText}</p>
${this.hasFeedbackIncorrect ? html`<slot name="feedbackIncorrect"></slot>` : ``}` : ``}
${this.showAnswer && this.isCorrect() ? html`
<p class="feedback">${this.correctText}</p>
${this.hasFeedbackCorrect ? html`<slot name="feedbackCorrect"></slot>` : ``}` : ``}
${this.hasHint && this.showAnswer && !this.isCorrect() ? html`
<h4>Need a hint?</h4>
<div>
<slot name="hint"></slot>
</div>
` : ``}
${this.hasEvidence && this.showAnswer && this.isCorrect() ? html`
<h4>Evidence</h4>
<div>
<slot name="evidence"></slot>
</div>
` : ``}
<simple-toolbar-button
?disabled="${this.disabled || !this.showAnswer}"
@click="${this.resetAnswer}"
label="${this.t.tryAgain}">
</simple-toolbar-button>
`;
}

clickSingle(e) {
// single option shortcut only bc we have to wipe all others
if (this.singleOption) {
Expand Down Expand Up @@ -767,7 +789,7 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {

loadLightDomData() {
if (this.children.length > 0) {
let inputs = Array.from(this.querySelectorAll("input"));
let inputs = Array.from(this.querySelectorAll("input:not([slot])"));
let answers = [];
for (var i in inputs) {
let answer = {
Expand All @@ -787,8 +809,10 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
this.hasEvidence = this.querySelector('[slot="evidence"]');
// wipe lightdom after reading it in for data. This makes it harder for someone
// to just inspect the document and get at the underlying data
// @TODO need to figure this one out with above since it has to have this data now
//this.innerHTML = "";
// remove just the inputs we found
for (var i in inputs) {
inputs[i].remove();
}
}
}

Expand Down
1 change: 0 additions & 1 deletion elements/sorting-question/src/sorting-question.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,6 @@ export class SortingQuestion extends SchemaBehaviors(I18NMixin(DDDSuper(LitEleme
transition: all 0.3s ease-in-out;
border: none;
border-radius: var(--ddd-radius-xs);
}
simple-toolbar-button {
background-color: light-dark(var(--ddd-theme-default-link), var(--ddd-theme-default-linkLight));
Expand Down
2 changes: 1 addition & 1 deletion elements/tagging-question/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h3>Basic tagging-question demo</h3>
<demo-snippet>
<template>
<tagging-question question="How would you describe... this..?">
<img src="https://btopro.com/files/i-developed.jpg" />
<img slot="content" src="https://btopro.com/files/i-developed.jpg" />
<input value="Huey" data-unselected="Good job reading, some people would have missed this!" data-selected="This name does not start with an D, it starts with H silly Goose">
<input correct value="Duey" data-selected="Pretty easy there, obviously has a D in it" data-unselected="4 letters, focus on the 1st one">
<input correct value="Daffy" data-selected="You knew it" data-unselected="Are you serious... look at the letter!">
Expand Down
Loading

0 comments on commit 1a6d2ec

Please sign in to comment.