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 of responseDeclaration: ?

...

Format3

Expand
titleProposed Format3 of responseDeclaration:
Code Block
{
    
"
maxScore
response1": {

        
"cardinality": "ordered",

        "type": "
integer
map",

        "
defaultValue
correctResponse": 
1
{
        
}
    
}

For more info on outcomeDeclarartion - refer , reference2

interactions

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

        },
        "
right
mapping": [

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

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

editorState

Code Block
languagejson
{
 "score": 0.25
   "options": {        },
"left": [             {
                "value": {
                    "bodyleft": "<p>Red</p>"3,
                    "valueright": 03
                }
            },
            {    "score": 0.25
           "value": {}
        ]
           "body": "<p>Yellow</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": {
            "
value
cardinality": 
1
"ordered",
            "type": "integer",
  
}
          "defaultValue": 1
 
},
       }
    
}

For more info on outcomeDeclarartion - refer , reference2

interactions

Code Block
{
    "response1": { 
        "type": "
value
match"
:
,
 
{
       "options": {
            "
body
left": 
"<p>Green</p>",
[
                {
   
"value":
 
2
                
}
"label": "<p>Red</p>",
            
},
        "value": 0
   
{
             },
               
"value":
 {
                    "
body
label": "
<p>Orange<
<p>Yellow</p>",
                    "value": 
3
1
                },
               
}
 {
                    
],
"label": "<p>Green</p>",
                    "
right
value": 2
[
               
{
 },
               
"value":
 {
                    "
body
label": "
<p>Apple<
<p>Orange</p>",
                    "value": 
0
3
                }
            
}
],
            
{
"right": [
               
"value":
 {
                    "
body
label": "
<p>Banana<
<p>Apple</p>",
                    "value": 
1
0
                },
            
},
    
{
     
{
               
"
value
label": 
{
"<p>Banana</p>",
                    "
body
value":
"<p>Grapes</p>",
 1
                },
    
"value":
 
2
           {
     
}
             
},
  "label": "<p>Grapes</p>",
         
{
           "value": 
{
2
                },
   
"body":
 
"<p>Orange</p>",
            {
        
"value":
 
3
           "label": "<p>Orange</p>",
    
}
             
}
   "value": 3
    
]
     
},
     
"question":
 
"<p>Match
 
the
}
colour
 
with
 
the
 
fruits.</p>",
     
"solutions":
 
[
   ]
     
{
   
},
        "
id
validation": 
"3fe0e600-9746-4673-81a9-3429af3fef41",
{
            "
type
required": "
html
Yes"
,

        }
   
"value": "<figure class=
 }
}

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": 3
                }
2
           ]         },
 
      "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": {
            "required": "
value
Yes"
:

   
0,
     }
    
}
}

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,
  "value": [                 "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"
}

...