[Data Model] Match The Following Question

Background

We have received the MTF Question contribution in the C4GT 2023 program for the editor and the code is merged only in one of the feature branch.

Player side implementation is not done yet, before starting the player implementation we need to re-look into the MTF data model if it’s as per the QuML spec and if any improvement can be done in it to make it easy to understand.

Data Model of MTF Question

body

<div class='question-body' tabindex='-1'>
    <div class='mtf-title' tabindex='0'>
        <p>Match the colour with the fruits.</p>
    </div>
    <div data-match-interaction='response1' class='mtf-horizontal'></div>
</div>

Question is body is per the QuML spec

responseDeclaration

{
        "response1": {
            "cardinality": "multiple",
            "type": "map",
            "correctResponse": {
                "value": [
                    {
                        "0": 0
                    },
                    {
                        "1": 1
                    },
                    {
                        "2": 2
                    },
                    {
                        "3": 3
                    }
                ]
            },
            "mapping": [
                {
                    "value": {
                        "0": 0
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "1": 1
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "2": 2
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "3": 3
                    },
                    "score": 0.25
                }
            ]
        }
    }

responseDeclaration is as per the QuML spec

But above format of responseDeclaration it not self explanatory

Here are few new proposed Format for responseDeclaration

Cardinality for MTF Question should be "cardinality": "ordered"

Format1

Proposed Format1 of responseDeclaration:

{
    "response1": {
        "cardinality": "ordered",
        "type": "map",
        "correctResponse": {
            "value": [
                {
                    "lhs": 0,
                    "rhs": 0
                },
                {
                    "lhs": 1,
                    "rhs": 1
                },
                {
                    "lhs": 2,
                    "rhs": 2
                },
                {
                    "lhs": 3,
                    "rhs": 3
                }
            ]
        },
        "mapping": [
            {
                "value": {
                    "lhs": 0,
                    "rhs": 0
                },
                "score": 0.25
            },
            {
                "value": {
                    "lhs": 1,
                    "rhs": 1
                },
                "score": 0.25
            },
            {
                "value": {
                    "lhs": 2,
                    "rhs": 2
                },
                "score": 0.25
            },
            {
                "value": {
                    "lhs": 3,
                    "rhs": 3
                },
                "score": 0.25
            }
        ]
    }
}

Format2

Proposed Format2 of responseDeclaration:

{
    "response1": {
        "cardinality": "ordered",
        "type": "map",
        "correctResponse": {
            "value": [
                {
                    "leftIndex": 0,
                    "rightIndex": 0
                },
                {
                    "leftIndex": 1,
                    "rightIndex": 1
                },
                {
                    "leftIndex": 2,
                    "rightIndex": 2
                },
                {
                    "leftIndex": 3,
                    "rightIndex": 3
                }
            ]
        },
        "mapping": [
            {
                "value": {
                    "leftIndex": 0,
                    "rightIndex": 0
                },
                "score": 0.25
            },
            {
                "value": {
                    "leftIndex": 1,
                    "rightIndex": 1
                },
                "score": 0.25
            },
            {
                "value": {
                    "leftIndex": 2,
                    "rightIndex": 2
                },
                "score": 0.25
            },
            {
                "value": {
                    "leftIndex": 3,
                    "rightIndex": 3
                },
                "score": 0.25
            }
        ]
    }
}

Since the value in lhs/rhs or leftIndex/rightIndex are index of the options, Format2 seems to make more sense.

Final Format of responseDeclaration: ?

outcomeDeclaration

{
        "maxScore": {
            "cardinality": "ordered",
            "type": "integer",
            "defaultValue": 1
        }
    }

For more info on outcomeDeclarartion - refer , reference2

interactions

{
    "response1": {
        "type": "match",
        "options": {
            "left": [
                {
                    "label": "<p>Red</p>",
                    "value": 0
                },
                {
                    "label": "<p>Yellow</p>",
                    "value": 1
                },
                {
                    "label": "<p>Green</p>",
                    "value": 2
                },
                {
                    "label": "<p>Orange</p>",
                    "value": 3
                }
            ],
            "right": [
                {
                    "label": "<p>Apple</p>",
                    "value": 0
                },
                {
                    "label": "<p>Banana</p>",
                    "value": 1
                },
                {
                    "label": "<p>Grapes</p>",
                    "value": 2
                },
                {
                    "label": "<p>Orange</p>",
                    "value": 3
                }
            ]
        },
        "validation": {
            "required": "Yes"
        }
    }
}

Question interactions is of type object so it is as per the QuML spec

editorState

editorState of Question

{
    "options": {
        "left": [
            {
                "value": {
                    "body": "<p>Red</p>",
                    "value": 0
                }
            },
            {
                "value": {
                    "body": "<p>Yellow</p>",
                    "value": 1
                }
            },
            {
                "value": {
                    "body": "<p>Green</p>",
                    "value": 2
                }
            },
            {
                "value": {
                    "body": "<p>Orange</p>",
                    "value": 3
                }
            }
        ],
        "right": [
            {
                "value": {
                    "body": "<p>Apple</p>",
                    "value": 0
                }
            },
            {
                "value": {
                    "body": "<p>Banana</p>",
                    "value": 1
                }
            },
            {
                "value": {
                    "body": "<p>Grapes</p>",
                    "value": 2
                }
            },
            {
                "value": {
                    "body": "<p>Orange</p>",
                    "value": 3
                }
            }
        ]
    },
    "question": "<p>Match the colour with the fruits.</p>",
    "solutions": [
        {
            "id": "3fe0e600-9746-4673-81a9-3429af3fef41",
            "type": "html",
            "value": "<figure class=\"table\"><table><tbody><tr><td>Red</td><td>Apple</td></tr><tr><td>Yellow</td><td>Banana</td></tr><tr><td>Green</td><td>Grapes</td></tr><tr><td>Orange</td><td>Orange</td></tr></tbody></table></figure><p>In the solution we can use the feature of ckeditor so we can also add table as above. using table menu.<br>We can add solution as text + image / Video / Audi (Yet to come)</p>"
        }
    ]
}

editorState Stores editor specific data.

templateId

"templateId": "mtf-horizontal" / "mtf-vertical"

primaryCategory

"primaryCategory": "Match The Following Question"

qType

"qType": "MTF"

interactionTypes

"interactionTypes": ["match"]

Let’s Compare MTF with MCQ data

Compare MCQ body with MTF body

MCQ body vs MTF body

MCQ Body

MTF Body

<div class='question-body' tabindex='-1'>
    <div class='mcq-title' tabindex='0'>
        <p>Which of the fruits is red in colour?</p>
    </div>
    <div data-choice-interaction='response1' class='mcq-vertical'></div>
</div>

<div class='question-body' tabindex='-1'>
    <div class='mtf-title' tabindex='0'>
        <p>Match the colour with the fruits.</p>
    </div>
    <div data-match-interaction='response1' class='mtf-horizontal'></div>
</div>

Compare MCQ interactions with MTF interactions

MCQ interactions vs MTF interactions

MCQ interaction

MTF interaction

{
    "response1": {
        "type": "choice",
        "options": [
            {
                "label": "<p>Apple</p>",
                "value": 0,
                "hint": ""
            },
            {
                "label": "<p>Banana</p>",
                "value": 1,
                "hint": ""
            },
            {
                "label": "<p>Grapes</p>",
                "value": 2,
                "hint": ""
            },
            {
                "label": "<p>Orange</p>",
                "value": 3,
                "hint": ""
            }
        ],
        "validation": {
            "required": "Yes"
        }
    }
}

{
    "response1": {
        "type": "match",
        "options": {
            "left": [
                {
                    "label": "<p>Red</p>",
                    "value": 0
                },
                {
                    "label": "<p>Yellow</p>",
                    "value": 1
                },
                {
                    "label": "<p>Green</p>",
                    "value": 2
                },
                {
                    "label": "<p>Orange</p>",
                    "value": 3
                }
            ],
            "right": [
                {
                    "label": "<p>Apple</p>",
                    "value": 0
                },
                {
                    "label": "<p>Banana</p>",
                    "value": 1
                },
                {
                    "label": "<p>Grapes</p>",
                    "value": 2
                },
                {
                    "label": "<p>Orange</p>",
                    "value": 3
                }
            ]
        },
        "validation": {
            "required": "Yes"
        }
    }
}

Compare MCQ responseDeclaration with MTF responseDeclaration

MCQ responseDeclaration vs MTF responseDeclaration

MCQ responseDeclaration

MTF responseDeclaration

{
    "response1": {
        "cardinality": "single",
        "type": "integer",
        "correctResponse": {
            "value": 0
        },
        "mapping": [
            {
                "value": 0,
                "score": 1
            }
        ]
    }
}

//MMCQ
{
        "response1": {
            "cardinality": "multiple",
            "type": "integer",
            "correctResponse": {
                "value": [
                    0,
                    3
                ]
            },
            "mapping": [
                {
                    "value": 0,
                    "score": 0.5
                },
                {
                    "value": 3,
                    "score": 0.5
                }
            ]
        }
    }

{
        "response1": {
            "cardinality": "multiple",
            "type": "map",
            "correctResponse": {
                "value": [
                    {
                        "0": 0
                    },
                    {
                        "1": 1
                    },
                    {
                        "2": 2
                    },
                    {
                        "3": 3
                    }
                ]
            },
            "mapping": [
                {
                    "value": {
                        "0": 0
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "1": 1
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "2": 2
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "3": 3
                    },
                    "score": 0.25
                }
            ]
        }
    }

Compare MCQ outcomeDeclaration with MTF outcomeDeclaration

MCQ outcomeDeclaration vs MTF outcomeDeclaration

MCQ outcomeDeclaration

MTF outcomeDeclaration

{
        "maxScore": {
            "cardinality": "multiple",
            "type": "integer",
            "defaultValue": 1
        },
        "hint": {
            "cardinality": "single",
            "type": "string",
            "defaultValue": "8498fef0-37db-4123-95bb-ac45fccf9665"
        }
    }

{
        "maxScore": {
            "cardinality": "multiple",
            "type": "integer",
            "defaultValue": 1
        },
        "hint": {
            "cardinality": "single",
            "type": "string",
            "defaultValue": "098eacc6-07fd-45ba-9e3c-372042154cd3"
        }
    }

Compare MCQ editorState with MTF editorState

MCQ editorState vs MTF editorState

MCQ editorState

MTF editorState

{
        "options": [
            {
                "answer": true,
                "value": {
                    "body": "<p>Apple</p>",
                    "value": 0
                }
            },
            {
                "answer": false,
                "value": {
                    "body": "<p>Banana</p>",
                    "value": 1
                }
            },
            {
                "answer": false,
                "value": {
                    "body": "<p>Grapes</p>",
                    "value": 2
                }
            },
            {
                "answer": true,
                "value": {
                    "body": "<p>Strawberry</p>",
                    "value": 3
                }
            }
        ],
        "question": "<p>Which of the fruits is red in colour?</p>",
        "solutions": [
            {
                "id": "71efa845-2856-4a82-b493-101facfddd26",
                "type": "html",
                "value": "<p>Apple is red in colour</p>"
            }
        ]
    }

{
    "options": {
        "left": [
            {
                "value": {
                    "body": "<p>Red</p>",
                    "value": 0
                }
            },
            {
                "value": {
                    "body": "<p>Yellow</p>",
                    "value": 1
                }
            },
            {
                "value": {
                    "body": "<p>Green</p>",
                    "value": 2
                }
            },
            {
                "value": {
                    "body": "<p>Orange</p>",
                    "value": 3
                }
            }
        ],
        "right": [
            {
                "value": {
                    "body": "<p>Apple</p>",
                    "value": 0
                }
            },
            {
                "value": {
                    "body": "<p>Banana</p>",
                    "value": 1
                }
            },
            {
                "value": {
                    "body": "<p>Grapes</p>",
                    "value": 2
                }
            },
            {
                "value": {
                    "body": "<p>Orange</p>",
                    "value": 3
                }
            }
        ]
    },
    "question": "<p>Match the colour with the fruits.</p>",
    "solutions": [
        {
            "id": "3fe0e600-9746-4673-81a9-3429af3fef41",
            "type": "html",
            "value": "<figure class=\"table\"><table><tbody><tr><td>Red</td><td>Apple</td></tr><tr><td>Yellow</td><td>Banana</td></tr><tr><td>Green</td><td>Grapes</td></tr><tr><td>Orange</td><td>Orange</td></tr></tbody></table></figure><p>In the solution we can use the feature of ckeditor so we can also add table as above. using table menu.<br>We can add solution as text + image / Video / Audi (Yet to come)</p>"
        }
    ]
}

Complete MTF Question Metadata Example:

MTF question metadata

{
    "mimeType": "application/vnd.sunbird.question",
    "media": [],
    "editorState": {
        "options": {
            "left": [
                {
                    "value": {
                        "body": "<p>Red</p>",
                        "value": 0
                    }
                },
                {
                    "value": {
                        "body": "<p>Yellow</p>",
                        "value": 1
                    }
                },
                {
                    "value": {
                        "body": "<p>Green</p>",
                        "value": 2
                    }
                },
                {
                    "value": {
                        "body": "<p>Orange</p>",
                        "value": 3
                    }
                }
            ],
            "right": [
                {
                    "value": {
                        "body": "<p>Apple</p>",
                        "value": 0
                    }
                },
                {
                    "value": {
                        "body": "<p>Banana</p>",
                        "value": 1
                    }
                },
                {
                    "value": {
                        "body": "<p>Grapes</p>",
                        "value": 2
                    }
                },
                {
                    "value": {
                        "body": "<p>Orange</p>",
                        "value": 3
                    }
                }
            ]
        },
        "question": "<p>Match the colour with the fruits.</p>",
        "solutions": [
            {
                "id": "3fe0e600-9746-4673-81a9-3429af3fef41",
                "type": "html",
                "value": "<figure class=\"table\"><table><tbody><tr><td>Red</td><td>Apple</td></tr><tr><td>Yellow</td><td>Banana</td></tr><tr><td>Green</td><td>Grapes</td></tr><tr><td>Orange</td><td>Orange</td></tr></tbody></table></figure><p>In the solution we can use the feature of ckeditor so we can also add table as above. using table menu.<br>We can add solution as text + image / Video / Audi (Yet to come)</p>"
            }
        ]
    },
    "templateId": "mtf-horizontal",
    "complexityLevel": [],
    "maxScore": 1,
    "name": "MTF",
    "responseDeclaration": {
        "response1": {
            "cardinality": "multiple",
            "type": "map",
            "correctResponse": {
                "value": [
                    {
                        "0": 0
                    },
                    {
                        "1": 1
                    },
                    {
                        "2": 2
                    },
                    {
                        "3": 3
                    }
                ]
            },
            "mapping": [
                {
                    "value": {
                        "0": 0
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "1": 1
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "2": 2
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "3": 3
                    },
                    "score": 0.25
                }
            ]
        }
    },
    "outcomeDeclaration": {
        "maxScore": {
            "cardinality": "multiple",
            "type": "integer",
            "defaultValue": 1
        },
        "hint": {
            "cardinality": "single",
            "type": "string",
            "defaultValue": "098eacc6-07fd-45ba-9e3c-372042154cd3"
        }
    },
    "interactionTypes": [
        "match"
    ],
    "interactions": {
        "response1": {
            "type": "match",
            "options": {
                "left": [
                    {
                        "label": "<p>Red</p>",
                        "value": 0
                    },
                    {
                        "label": "<p>Yellow</p>",
                        "value": 1
                    },
                    {
                        "label": "<p>Green</p>",
                        "value": 2
                    },
                    {
                        "label": "<p>Orange</p>",
                        "value": 3
                    }
                ],
                "right": [
                    {
                        "label": "<p>Apple</p>",
                        "value": 0
                    },
                    {
                        "label": "<p>Banana</p>",
                        "value": 1
                    },
                    {
                        "label": "<p>Grapes</p>",
                        "value": 2
                    },
                    {
                        "label": "<p>Orange</p>",
                        "value": 3
                    }
                ]
            },
            "validation": {
                "required": "Yes"
            }
        }
    },
    "qType": "MTF",
    "primaryCategory": "Match The Following Question",
    "solutions": {
        "3fe0e600-9746-4673-81a9-3429af3fef41": "<figure class=\"table\"><table><tbody><tr><td>Red</td><td>Apple</td></tr><tr><td>Yellow</td><td>Banana</td></tr><tr><td>Green</td><td>Grapes</td></tr><tr><td>Orange</td><td>Orange</td></tr></tbody></table></figure><p>In the solution we can use the feature of ckeditor so we can also add table as above. using table menu.<br>We can add solution as text + image / Video / Audi (Yet to come)</p>"
    },
    "body": "<div class='question-body' tabindex='-1'><div class='mtf-title' tabindex='0'><p>Match the colour with the fruits.</p></div><div data-match-interaction='response1' class='mtf-horizontal'></div></div>",
    "answer": "<div class='match-container'><div class='left-options'><div class='left-option'><p>Red</p></div><div class='left-option'><p>Yellow</p></div><div class='left-option'><p>Green</p></div><div class='left-option'><p>Orange</p></div></div><div class='right-options'><div class='right-option'><p>Apple</p></div><div class='right-option'><p>Banana</p></div><div class='right-option'><p>Grapes</p></div><div class='right-option'><p>Orange</p></div></div></div>",
    "createdBy": "5a587cc1-e018-4859-a0a8-e842650b9d64",
    "board": "CBSE",
    "medium": [
        "English"
    ],
    "gradeLevel": [
        "Class 4"
    ],
    "subject": [
        "Hindi"
    ],
    "author": "Test User",
    "channel": "01309282781705830427",
    "framework": "inquiry_k-12",
    "copyright": "NIT123",
    "audience": [
        "Student"
    ],
    "license": "CC BY 4.0"
}