Skip to content

Commit

Permalink
https://github.com/elmsln/issues/issues/1997
Browse files Browse the repository at this point in the history
  • Loading branch information
btopro committed May 15, 2024
1 parent 2f55b23 commit 90dadca
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 16 deletions.
29 changes: 17 additions & 12 deletions elements/matching-question/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,23 @@
<h3>Basic matching-question demo</h3>
<demo-snippet>
<template>
<matching-question question="Name the heavenly bodies">
<input correct value="Planet" />
<input value="Mars" />
<input value="Earth" />
<input value="Mercury" />
<input value="Venus" />
<input correct value="Star" />
<input value="Sun" />
<input value="Alpha Sentary" />
<input correct value="Space junk" />
<input value="Tesla" />
<input value="Tesla2" />
<matching-question question="The Pantheon affords a rare opportunity to experience a built structure just as Romans of the day would have. From the list below, place the labels into the boxes to identify the building’s purpose, list the design characteristics, trace the associated building features, and identify its significance.">
<input value="Power" />
<input value="Temple of the Emperor Trajan" />
<input value="Immortalized Trajan's accomplishments" />
<input value="Small support columns" />
<input correct value="Purpose" />
<input value="Temple of all Roman gods" />
<input correct value="Design Characteristics" />
<input value="Innovation" />
<input value="Center" />
<input value="Organization" />
<input correct value="Building Features" />
<input value="Windowless sphere with oculus" />
<input value="Largest unreinforced concrete dome" />
<input value="One entrance on axis" />
<input correct value="Significance" />
<input value="Built form embodying confidence and pride" />
</matching-question>
</template>
</demo-snippet>
Expand Down
10 changes: 8 additions & 2 deletions elements/matching-question/matching-question.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ class MatchingQuestion extends QuestionElement {
let data = super.processInput(index, inputs);
// implies previous index is the matching target
if (data.correct === false) {
data.matchOption = true;
// look back until we find a target
for (let i=priorData.length; i>=0; i--) {
if (!data.match && priorData[i] && priorData[i].target === true) {
Expand All @@ -166,7 +167,12 @@ class MatchingQuestion extends QuestionElement {
<tbody>
${this.answers.filter(answer => answer.target).map(answer => html`
<tr class="matches-container">
<td class="target">${answer.label}</td>
${!this.matchTarget ? html`<td class="target">${answer.label}</td>` : html`
<td class="target" id="target-${answer.order}" @drop="${this.handleDrop}" @dragover="${this.allowDropAnswerMatches}">
${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html`
<button ?disabled="${this.disabled || this.showAnswer}" class="tag-option" draggable="${this.showAnswer ? "false" : "true"}" @dragstart="${this.handleDrag}" @dragend="${this.handleDragEnd}" @click="${() => this.handleTagClick(tagOption)}">${tagOption.label}</button>
`)}
</td>`}
<td class="match" id="match-${answer.order}" @drop="${this.handleDrop}" @dragover="${this.allowDropAnswerMatches}">
${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html`
<button ?disabled="${this.disabled || this.showAnswer}" class="tag-option" draggable="${this.showAnswer ? "false" : "true"}" @dragstart="${this.handleDrag}" @dragend="${this.handleDragEnd}" @click="${() => this.handleTagClick(tagOption)}">${tagOption.label}</button>
Expand All @@ -177,7 +183,7 @@ class MatchingQuestion extends QuestionElement {
</tbody>
</table>
<div id="possible-container" class="possible" @drop="${this.handleDrop}" @dragover="${this.allowDrop}">
${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.match : true).map(tagOption => html`
${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.matchOption : true).map(tagOption => html`
<button ?disabled="${this.disabled || this.showAnswer}" class="tag-option" draggable="${this.showAnswer ? "false" : "true"}" @dragstart="${this.handleDrag}" @dragend="${this.handleDragEnd}" @click="${() => this.handleTagClick(tagOption)}">${tagOption.label}</button>
`)}
</div>
Expand Down
10 changes: 8 additions & 2 deletions elements/matching-question/src/matching-question.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ class MatchingQuestion extends QuestionElement {
let data = super.processInput(index, inputs);
// implies previous index is the matching target
if (data.correct === false) {
data.matchOption = true;
// look back until we find a target
for (let i=priorData.length; i>=0; i--) {
if (!data.match && priorData[i] && priorData[i].target === true) {
Expand All @@ -166,7 +167,12 @@ class MatchingQuestion extends QuestionElement {
<tbody>
${this.answers.filter(answer => answer.target).map(answer => html`
<tr class="matches-container">
<td class="target">${answer.label}</td>
${!this.matchTarget ? html`<td class="target">${answer.label}</td>` : html`
<td class="target" id="target-${answer.order}" @drop="${this.handleDrop}" @dragover="${this.allowDropAnswerMatches}">
${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html`
<button ?disabled="${this.disabled || this.showAnswer}" class="tag-option" draggable="${this.showAnswer ? "false" : "true"}" @dragstart="${this.handleDrag}" @dragend="${this.handleDragEnd}" @click="${() => this.handleTagClick(tagOption)}">${tagOption.label}</button>
`)}
</td>`}
<td class="match" id="match-${answer.order}" @drop="${this.handleDrop}" @dragover="${this.allowDropAnswerMatches}">
${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html`
<button ?disabled="${this.disabled || this.showAnswer}" class="tag-option" draggable="${this.showAnswer ? "false" : "true"}" @dragstart="${this.handleDrag}" @dragend="${this.handleDragEnd}" @click="${() => this.handleTagClick(tagOption)}">${tagOption.label}</button>
Expand All @@ -177,7 +183,7 @@ class MatchingQuestion extends QuestionElement {
</tbody>
</table>
<div id="possible-container" class="possible" @drop="${this.handleDrop}" @dragover="${this.allowDrop}">
${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.match : true).map(tagOption => html`
${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.matchOption : true).map(tagOption => html`
<button ?disabled="${this.disabled || this.showAnswer}" class="tag-option" draggable="${this.showAnswer ? "false" : "true"}" @dragstart="${this.handleDrag}" @dragend="${this.handleDragEnd}" @click="${() => this.handleTagClick(tagOption)}">${tagOption.label}</button>
`)}
</div>
Expand Down

0 comments on commit 90dadca

Please sign in to comment.