Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

Code Block
languagehtml
<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 - C4GT 2023 contributed Format

C4GT contribution exits in feature branch - C4GT_Issue_42

Code Block
{
        "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 (Recommended)

Expand
titleProposed Format1 of responseDeclaration:
Code Block
languagejson
{
    "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
            }
        ]
    }
}

...

Expand
titleProposed Format2 of responseDeclaration:
Code Block
languagejson
{
    "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 Format3

Expand
titleProposed Format3 of responseDeclaration:

...

outcomeDeclaration

Code Block
{

    
"
maxScore
response1": {

        
"cardinality": "
multiple
ordered",

        "type": "
integer
map",

        "
defaultValue
correctResponse": 
1
{
        
},
    
"
hint
value": 
{
[
         
"cardinality":
 
"single",
      {
      
"type":
 
"string",
             "
defaultValue
left": 
"098eacc6-07fd-45ba-9e3c-372042154cd3"
0,
    
}
 
}

outcomeDeclarartion of MTF is similar MCQ which is as per QuML compliant.

For more info on outcomeDeclarartion - refer

interactions

Code Block
Expand
titleeditorState of Question
{
     
"response1":
 
{
         "
type
right": 
"match",
0
        
"options":
 
{
       },
     
"left": [
           
{
                    "
label
left": 
"<p>Red</p>"
1,
                    "
value
right": 
0
1
                },
                {
                    "
label
left":
"<p>Yellow</p>",
 2,
                    
"
value
right": 
1
2
                },
                {
                    "
label
left": 
"<p>Green</p>"
3,
                    "
value
right": 
2
3
                }
,

            ]
   
{
     },
        "mapping": [
       
"label":
 
"<p>Orange</p>",
    {
                "value": 
3
{
                
}
    "left": 0,
       
],
             "right": 
[
0
                
{
},
                "
label
score": 
"<p>Apple</p>",
0.25
            
},
      
"value":
 
0
     {
           
},
     
"value": {
                    "
label
left": 
"<p>Banana</p>"
1,
                    "
value
right": 1
                },
                
{
"score": 0.25
            },
       
"label":
 
"<p>Grapes</p>",
    {
                "value": 
2
{
                
},
    "left": 2,
           
{
         "right": 2
           
"label":
 
"<p>Orange</p>",
    },
                "
value
score": 
3
0.25
            
},
            
]
{
        
},
        
"
validation
value": {
            
"required":
 
"Yes"
       
}
"left": 3,
    
}
 
}

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

editorState

Code Block
languagejson
{     "options": {         "leftright": [3
            {    },
            "value": {   "score": 0.25
            }
   "body": "<p>Red</p>",    ]
    }
}

Final Format of responseDeclaration: ?

Note - cardinality enum should be changed in inQuiry schema to fit in "cardinality": "ordered"

Since MTF and Arrange Sequence question is type of question where score is calculated based on order of response, the cardinality should be ordered. Refer QuML spec - cardinality

outcomeDeclaration

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

For more info on outcomeDeclarartion - refer , reference2

interactions

Code Block
{
    "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

Expand
titleeditorState of Question
Code Block
languagejson
{
    "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>"
        }
    ]
}

...

Let’s Compare MTF with MCQ data

Compare MCQ body with MTF body

Expand
titleMCQ body vs MTF body

MCQ Body

MTF Body

Code Block
languagehtml
<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>
Code Block
languagehtml
<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

Expand
titleMCQ interactions vs MTF interactions

MCQ interaction

MTF interaction

Code Block
languagejson
{
    "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"
        }
    }
}
Code Block
languagejson
{
    "response1": {
        "type": "match",
        "options": {
            "left": [
                {
                    "label": "<p>Red</p>",
                    "value": 0
   {
             },"left": [
                {
                    "label": "<p>Yellow<<p>Red</p>",
                    "value": 10
                },
                {
                    "label": "<p>Green<<p>Yellow</p>",
                    "value": 21
                },
                {
                    "label": "<p>Orange<<p>Green</p>",
                    "value": 32
                },
            ],    {
        "right": [           "label": "<p>Orange</p>",
    {                "value": 3
   "label": "<p>Apple</p>",            }
        "value": 0   ],
             },"right": [
                {
                    "label": "<p>Banana<<p>Apple</p>",
                    "value": 10
                },
                {
                    "label": "<p>Grapes<<p>Banana</p>",
                    "value": 21
                },
                {
                    "label": "<p>Orange<<p>Grapes</p>",
                    "value": 32
                }
            ]
        },
        "validation": {
            "required": "Yes"             }{
    } }

Compare MCQ responseDeclaration with MTF responseDeclaration

{
Expand
titleMCQ responseDeclaration vs MTF responseDeclaration

MCQ responseDeclaration

MTF responseDeclaration

Code Block
languagejson
     
"response1":
 
{
         "
cardinality
label": "
single
<p>Orange</p>",
          
"type":
 
"integer",
         "
correctResponse
value": 
{
3
           
"value":
 
0
    }
    
},
        ]
"mapping":
 
[
       },
     
{
   "validation": {
            "
value
required": 
0,
"Yes"
        }
    }
}

Compare MCQ responseDeclaration with MTF responseDeclaration

Expand
titleMCQ responseDeclaration vs MTF responseDeclaration

MCQ responseDeclaration

MTF responseDeclaration

Code Block
languagejson
{
      "scoreresponse1": 1{
        "cardinality": "single",
  }      "type": "integer",
 ]     } }
Code Block
//MMCQ {
        "response1"correctResponse": {
            "cardinalityvalue": "multiple", 0
        },
        "typemapping": "integer",
[
           "correctResponse": {
                "value": [0,
                "score": 1
  0,          }
        ]
 3   }
}
Code Block
//MMCQ
{
        "response1": {
 ]             }"cardinality": "multiple",
            "mappingtype": ["integer",
               "correctResponse": {
   
                "value": 0,
      [
              "score": 0.5     0,
           },         3
       {         ]
           "value": 3},
            "mapping": [
      "score": 0.5         {
       }             ]
"value": 0,
       }     }
Code Block
languagejson
{
        "response1score": {
   0.5
        "cardinality": "multiple",       },
     "type": "map",          {
  "correctResponse": {                 "value": [3,
                    "score": 0.5
  {              }
          "0": 0 ]
        }
    }
Code Block
languagejson
{
     },   "response1": {
            "cardinality": "multiple",
  {          "type": "map",
             "1correctResponse": 1{
                "value": [
  },                     {
                        "20": 20
                    },
                    {
                        "31": 31
                    },
                ]    {
         },               "mapping2": [2
                   { },
                   "value": {
                        "03": 03
                    },
                ]
        "score": 0.25   },
             },"mapping": [
                {
                    "value": {
                        "10": 10
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "21": 21
                    },
                    "score": 0.25
                },
                {
                    "value": {
                        "32": 32
                    },
                    "score": 0.25
                }
     ,
      ]         }
    }

Compare MCQ outcomeDeclaration with MTF outcomeDeclaration

Expand
titleMCQ outcomeDeclaration vs MTF outcomeDeclaration

MCQ outcomeDeclaration

MTF outcomeDeclaration

Code Block
 {
        
"maxScore
            "value": {

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

Compare MCQ outcomeDeclaration with MTF outcomeDeclaration

Expand
titleMCQ outcomeDeclaration vs MTF outcomeDeclaration

MCQ outcomeDeclaration

MTF outcomeDeclaration

Code Block
{
        "maxScore": {
            "cardinality": "multiple",
            "type": "integer",
            "defaultValue": 1
        },
    }
Code Block
{
        "hintmaxScore": {
            "cardinality": "singlemultiple",
            "type": "stringinteger",
            "defaultValue": "098eacc6-07fd-45ba-9e3c-372042154cd3"1
        }
    }

Compare MCQ editorState with MTF editorState

Expand
titleMCQ editorState vs MTF editorState

MCQ editorState

MTF editorState

Code Block
languagejson
{
        "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>"
            }
        ]
    }
Code Block
Code Block
languagejson
{
    "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:
Expand
titleMTF question metadata
Code Block
{
    "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"
}

...