Skip to content

Commit

Permalink
https://github.com/haxtheweb/issues/issues/2044
Browse files Browse the repository at this point in the history
  • Loading branch information
@btopro
btopro committed Jul 12, 2024
1 parent f0fb8b2 commit df3ffc8
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 92 deletions.
17 changes: 13 additions & 4 deletions elements/multiple-choice/lib/QuestionElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -640,12 +640,13 @@ export class QuestionElement extends SchemaBehaviors(
:host([edit]) .edit-wrapper ::slotted(*) {
display: block;
width: 100%;
padding: 16px;
border: var(--ddd-border-sm);
border-style: dashed;
}
:host([edit]) .edit-wrapper ::slotted(*)::before {
content: attr(slot);
:host([edit]) .edit-wrapper ::slotted(*:empty)::before {
display: block;
font-size: 16px;
font-size: 12px;
content: "Add content";
}
`,
];
Expand Down Expand Up @@ -1012,10 +1013,18 @@ export class QuestionElement extends SchemaBehaviors(
renderEditModeFeedbackAreas() {
return html`
<div class="edit-wrapper">
<h4>Related Content</h4>
<p>This creates a collapsed area for content related to this question and is always shown</p>
<slot name="content"></slot>
<h4>Feedback for incorrect answer</h4>
<slot name="feedbackIncorrect"></slot>
<h4>Feedback for correct answer</h4>
<slot name="feedbackCorrect"></slot>
<h4>Hint</h4>
<p>This is presented if the user gets the answer wrong</p>
<slot name="hint"></slot>
<h4>Evidence</h4>
<p>This is presented if the user gets the answer correct</p>
<slot name="evidence"></slot>
</div>
`;
Expand Down
3 changes: 2 additions & 1 deletion elements/sorting-question/sorting-question.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,7 @@ export class SortingQuestion extends QuestionElement {
// this manages the output of the feedback area
renderFeedback() {
return html`
${!this.edit ? html`
${this.showAnswer && this.numberCorrect !== this.answers.length
? html` <p class="feedback">
${this.t.numCorrectLeft} ${this.numberCorrect} out of
Expand Down Expand Up @@ -428,7 +429,7 @@ export class SortingQuestion extends QuestionElement {
label="${this.t.tryAgain}"
>
</simple-toolbar-button>
`;
` : this.renderEditModeFeedbackAreas()}`;
}

/**
Expand Down
3 changes: 2 additions & 1 deletion elements/sorting-question/src/sorting-question.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,7 @@ export class SortingQuestion extends QuestionElement {
// this manages the output of the feedback area
renderFeedback() {
return html`
${!this.edit ? html`
${this.showAnswer && this.numberCorrect !== this.answers.length
? html` <p class="feedback">
${this.t.numCorrectLeft} ${this.numberCorrect} out of
Expand Down Expand Up @@ -428,7 +429,7 @@ export class SortingQuestion extends QuestionElement {
label="${this.t.tryAgain}"
>
</simple-toolbar-button>
`;
` : this.renderEditModeFeedbackAreas()}`;
}

/**
Expand Down
88 changes: 45 additions & 43 deletions elements/tagging-question/src/tagging-question.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,21 +196,22 @@ class TaggingQuestion extends QuestionElement {
}

renderFeedback() {
return html`
${this.showAnswer && !this.isCorrect()
? html` <p class="feedback">${this.incorrectText}</p>
${this.querySelector('[slot="feedbackIncorrect"]')
? html`<slot name="feedbackIncorrect"></slot>`
: ``}`
: ``}
${this.showAnswer && this.isCorrect()
? html` <p class="feedback">${this.correctText}</p>
${this.querySelector('[slot="feedbackCorrect"]')
? html`<slot name="feedbackCorrect"></slot>`
: ``}`
: ``}
${this.showAnswer
? html`
return html` ${!this.edit
? html`
${this.showAnswer && !this.isCorrect()
? html` <p class="feedback">${this.incorrectText}</p>
${this.querySelector('[slot="feedbackIncorrect"]')
? html`<slot name="feedbackIncorrect"></slot>`
: ``}`
: ``}
${this.showAnswer && this.isCorrect()
? html` <p class="feedback">${this.correctText}</p>
${this.querySelector('[slot="feedbackCorrect"]')
? html`<slot name="feedbackCorrect"></slot>`
: ``}`
: ``}
${this.showAnswer
? html`
<p class="feedback">${this.selectedAnswers.filter((answer) => answer.correct).length} out of ${this.answers.filter((answer) => answer.correct).length} correct${this.selectedAnswers.length > this.answers.filter((answer) => answer.correct).length && this.selectedAnswers.length > this.selectedAnswers.filter((answer) => answer.correct).length ? html`, <strong>but too many options present!</strong>` : "."}</p>
<h4>Answers selected</h4>
<dl>
Expand All @@ -237,34 +238,35 @@ class TaggingQuestion extends QuestionElement {
</dl>
</div>
`
: ""}
${this.querySelector('[slot="hint"]') &&
this.showAnswer &&
!this.isCorrect()
? html`
<h4>Need a hint?</h4>
<div>
<slot name="hint"></slot>
</div>
`
: ``}
${this.querySelector('[slot="evidence"]') &&
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.querySelector('[slot="hint"]') &&
this.showAnswer &&
!this.isCorrect()
? html`
<h4>Need a hint?</h4>
<div>
<slot name="hint"></slot>
</div>
`
: ``}
${this.querySelector('[slot="evidence"]') &&
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.renderEditModeFeedbackAreas()}`;
}

randomizeOptions(array) {
Expand Down
88 changes: 45 additions & 43 deletions elements/tagging-question/tagging-question.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,21 +196,22 @@ class TaggingQuestion extends QuestionElement {
}

renderFeedback() {
return html`
${this.showAnswer && !this.isCorrect()
? html` <p class="feedback">${this.incorrectText}</p>
${this.querySelector('[slot="feedbackIncorrect"]')
? html`<slot name="feedbackIncorrect"></slot>`
: ``}`
: ``}
${this.showAnswer && this.isCorrect()
? html` <p class="feedback">${this.correctText}</p>
${this.querySelector('[slot="feedbackCorrect"]')
? html`<slot name="feedbackCorrect"></slot>`
: ``}`
: ``}
${this.showAnswer
? html`
return html` ${!this.edit
? html`
${this.showAnswer && !this.isCorrect()
? html` <p class="feedback">${this.incorrectText}</p>
${this.querySelector('[slot="feedbackIncorrect"]')
? html`<slot name="feedbackIncorrect"></slot>`
: ``}`
: ``}
${this.showAnswer && this.isCorrect()
? html` <p class="feedback">${this.correctText}</p>
${this.querySelector('[slot="feedbackCorrect"]')
? html`<slot name="feedbackCorrect"></slot>`
: ``}`
: ``}
${this.showAnswer
? html`
<p class="feedback">${this.selectedAnswers.filter((answer) => answer.correct).length} out of ${this.answers.filter((answer) => answer.correct).length} correct${this.selectedAnswers.length > this.answers.filter((answer) => answer.correct).length && this.selectedAnswers.length > this.selectedAnswers.filter((answer) => answer.correct).length ? html`, <strong>but too many options present!</strong>` : "."}</p>
<h4>Answers selected</h4>
<dl>
Expand All @@ -237,34 +238,35 @@ class TaggingQuestion extends QuestionElement {
</dl>
</div>
`
: ""}
${this.querySelector('[slot="hint"]') &&
this.showAnswer &&
!this.isCorrect()
? html`
<h4>Need a hint?</h4>
<div>
<slot name="hint"></slot>
</div>
`
: ``}
${this.querySelector('[slot="evidence"]') &&
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.querySelector('[slot="hint"]') &&
this.showAnswer &&
!this.isCorrect()
? html`
<h4>Need a hint?</h4>
<div>
<slot name="hint"></slot>
</div>
`
: ``}
${this.querySelector('[slot="evidence"]') &&
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.renderEditModeFeedbackAreas()}`;
}

randomizeOptions(array) {
Expand Down

0 comments on commit df3ffc8

Please sign in to comment.