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`
`)}