diff --git a/elements/matching-question/demo/index.html b/elements/matching-question/demo/index.html index 6767237811..7329cb4083 100644 --- a/elements/matching-question/demo/index.html +++ b/elements/matching-question/demo/index.html @@ -19,18 +19,23 @@

Basic matching-question demo

diff --git a/elements/matching-question/matching-question.js b/elements/matching-question/matching-question.js index 70dc891984..3f09e3bd19 100644 --- 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 { ${this.answers.filter(answer => answer.target).map(answer => html` - ${answer.label} + ${!this.matchTarget ? html`${answer.label}` : html` + + ${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html` + + `)} + `} ${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html` @@ -177,7 +183,7 @@ class MatchingQuestion extends QuestionElement {
- ${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.match : true).map(tagOption => html` + ${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.matchOption : true).map(tagOption => html` `)}
diff --git a/elements/matching-question/src/matching-question.js b/elements/matching-question/src/matching-question.js index 70dc891984..3f09e3bd19 100644 --- 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 { ${this.answers.filter(answer => answer.target).map(answer => html` - ${answer.label} + ${!this.matchTarget ? html`${answer.label}` : html` + + ${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html` + + `)} + `} ${this.matchesAnswers.filter(tag => tag.guess === answer.order).map(tagOption => html` @@ -177,7 +183,7 @@ class MatchingQuestion extends QuestionElement {
- ${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.match : true).map(tagOption => html` + ${this.displayedAnswers.filter(answer => !this.matchTarget ? answer.matchOption : true).map(tagOption => html` `)}