https://github.com/elmsln/issues/issues/1997

haxtheweb · May 15, 2024 · 90dadca · 90dadca
1 parent 2f55b23
commit 90dadca
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/elements/matching-question/demo/index.html b/elements/matching-question/demo/index.html
@@ -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>

diff --git a/elements/matching-question/matching-question.js b/elements/matching-question/matching-question.js
@@ -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) {
@@ -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>
@@ -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>

diff --git a/elements/matching-question/src/matching-question.js b/elements/matching-question/src/matching-question.js
@@ -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) {
@@ -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>
@@ -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>