Versions Compared

Version Old Version 10 New Version Current
Changes made by

Rajnish Dargan

Rajnish Dargan

Saved on

Key

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

Background

We want to bring Arrange Sequence Question in the Questionset Editor and the QuML Player.

Before starting the implementation we need to decide Arrange sequence Question data model which is to be as per the QuML spec.

Proposed Data Model of Arrange Sequence Question

body

Code Block
languagehtml
<div class='question-body' tabindex='-1'>
    <div class='arrange-sequence-title' tabindex='0'>
        <p>Arrange the fruits in alphabetic order</p>
    </div>
    <div data-order-interaction='response1' class='vertical,horizontal'></div>
</div>

responseDeclaration

Proposed format1 (Recommended)

...

titleProposed format of responseDeclaration

...

Background

We want to implement Arrange Sequence Question in the Questionset Editor and the QuML Player.

Before starting the implementation we need to decide Arrange sequence Question data model which is to be as per the QuML spec.

Proposed Data Model of Arrange Sequence Question

body

Code Block
languagehtml
<div class='question-body' tabindex='-1'>
    <div class='asq-title' tabindex='0'>
        <p>Arrange the fruits in alphabetic order</p>
    </div>
    <div data-order-interaction='response1' class='asq-vertical/asq-horizontal'></div>
</div>

responseDeclaration

Proposed format1 (Recommended)

Expand
titleProposed format of responseDeclaration
Code Block
{
    "response1": {
        "cardinality": "ordered",
        "type": "integer",
        "correctResponse": {
            "value": [
                0,
                1,
                2,
                3
            ]
        },
        "mapping": [
            {
                "value": 0,
                "score": 0.25
            },
            {
                "value": 1,
                "score": 0.25
            },
            {
                "value": 2,
                "score": 0.25
            },
            {
                "value": 3,
                "score": 0.25
            }
        ]
    }
}

Pros: We will not have to save long options text in the responseDeclaration, when the options will be having images the text of options will become to long and data will become un-readble.

Cons: We will not get to see the options value in the responseDeclaration

Proposed format2

Expand
titleProposed format of responseDeclaration
Code Block
"responseDeclaration": {
        "response1": {
            "cardinality": "ordered",
            "type": "integer",
            "correctResponse": {
                "value": ["<p>Apple</p>","<p>Banana</p>","<p>Grapes</p>","<p>Orange</p>"]
            },
            "mapping": [
                {
                    "value": "<p>Apple</p>",
                    "score": 0.25
                },
                {
                    "value": "<p>Banana</p>",
                    "score": 0.25
                },
                {
                    "value": "<p>Grapes</p>",
                    "score": 0.25
                },
                {
                    "value": "<p>Orange</p>",
                    "score": 0.25
                }
            ]
        }
    }

outcomeDeclaration

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

interactions

Code Block
languagejson
{
    "response1": {
        "type": "order",
        "options": [
            {
                "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"
        }
    }
}

answer

Code Block
languagehtml
<div class='answer-container'>
    <div class='answer-body'>
        <p>Apple</p>
    </div>
    <div class='answer-body'>
        <p>Banana</p>
    </div>
    <div class='answer-body'>
        <p>Grapes</p>
    </div>
    <div class='answer-body'>
        <p>Orange</p>
    </div>
</div>

editorState

Expand
titleeditor state of question
Code Block
{
    "options": [
        {
            "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>Arrange the fruits names in alphabetical order</p>",
    "solutions": [
        {
            "id": "71efa845-2856-4a82-b493-101facfddd26",
            "type": "html",
            "value": "<p>Proper order is Apple, Banana, Grapes, Orange</p>"
        }
    ]
}

templateId

Code Block
"templateId": "asq-horizontal" / "asq-vertical"

primaryCategory

Code Block
"primaryCategory": "Arrange Sequence Question"

qType

Code Block
"qType": "ASQ" // This will need spec change

interactionTypes

Code Block
"interactionTypes": ["order"] // This will need spec change

...

Let’s Compare ASQ with MCQ data

Compare MCQ body with ASQ body

Expand
titleMCQ body vs ASQ body

MCQ Body

ASQ Body

Code Block
<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
<div class='question-body' tabindex='-1'>
    <div class='asq-title' tabindex='0'>
        <p>Arrange the fruits in alphabetic order</p>
    </div>
    <div data-order-interaction='response1' class='asq-vertical/asq-horizontal'></div>
</div>

Compare MCQ interactions with ASQ interactions

Expand
titleMCQ interactions vs ASQ interactions

MCQ interactions

ASQ interactions

Code Block
languagejson
{
    "response1": {
        "type": "choice",
        "options": [
            {
                "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"
        }
    }
}
Code Block
languagejson
{
    "response1": {
        "type": "order",
        "options": [
            {
                "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

Expand
titleMCQ responseDeclaration vs MTF responseDeclaration

MCQ responseDeclaration (multi choice)

ASQ responseDeclaration

Code Block
languagejson
{
    "response1": {
        "cardinality": "multiple",
        "type": "integer",
        "correctResponse": {
            "value": [0,3]
        },
        "mapping": [
            {
                "value": 0,
                "score": 0.5
            },
            {
                "value": 3,
                "score": 0.5
            }
        ]
    }
}
Code Block
languagejson
{
    "response1": {
        "cardinality": "ordered",
        "type": "integer",
        "correctResponse": {
            "value": [0,1,2,3]
        },
        "mapping": [
            {
                "value": 0,
                "score": 0.25
            },
            {
                "value": 1,
                "score": 0.25
            },
            {
                "value": 2,
                "score": 0.25
            },
            {
                "value": 3,
                "score": 0.25
            }
        ]
    }
}

Compare MCQ outcomeDeclaration with ASQ outcomeDeclaration

Expand
titleMCQ outcomeDeclaration vs ASQ outcomeDeclaration

MCQ outcomeDeclaration

ASQ outcomeDeclaration

Code Block
{
        "maxScore": {
            "cardinality": "multiple",
            "type": "integer",
            "defaultValue": 1
        }
    }
Code Block
{
        "maxScore": {
            "cardinality": "ordered",
            "type": "integer",
            "defaultValue": 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
languagejson
{
    "options": [
        {
            "value": {
                "body": "<p>Apple</p>",
                "value": 0
            }
        },
        {
            "value": {
                "body": "<p>Banana</p>",
                "
response1
value": 1
{
            }
"cardinality":
"ordered",
     },
"type": "integer",
 {
            "
correctResponse
value": {
                "
value
body":
[0,1,2,3]
"<p>Grapes</p>",
},
    "value": 2
"mapping":
[
    }
        },
{
     {
            
"value":
0,
{
                "body": "<p>Orange</p>",
"score":
0.25
          "value": 3
},
       }
        }
{
    ],
    "question": "<p>Arrange the fruits names in alphabetical order</p>",
    "
value
solutions":
1,
[
        {
            "
score
id":
0.25
"71efa845-2856-4a82-b493-101facfddd26",
            "type": "html",
},
          "value": "<p>Proper order is Apple, Banana,
{
Grapes, Orange</p>"
        }
    
]
}

...

Complete ASQ Question Metadata Example:
Expand
titleASQ question metadata
Code Block
{
    "valuemimeType": 2"application/vnd.sunbird.question",
    "media": [],
    "editorState": {
        "score": 0.25
 options": [
            {
 },                "value": {
                    "valuebody": 3"<p>One</p>",
                    "scorevalue": 0.25
                }
            ]
},
       }
    }

Pros: We will not have to save long options text in the responseDeclaration, when the options will be having images the text of options will become to long and data will become un-readble.

Cons: We will not get to see the options value in the responseDeclaration

Proposed format2

Expand
titleProposed format of responseDeclaration
Code Block
"responseDeclaration": {     {
                "value": {
                    "response1body": {"<p>Two</p>",
                    "cardinalityvalue": "ordered",1
            "type": "integer",   }
         "correctResponse": {  },
            {
 "value": ["<p>Apple</p>","<p>Banana</p>","<p>Grapes</p>","<p>Orange</p>"]             }, "value": {
          "mapping": [            "body": "<p>Three</p>",
    {                "value": 2
   "value": "<p>Apple</p>",            }
        "score": 0.25   },
            {
},                "value": {
                    "valuebody": "<p>Banana<<p>Four</p>",
                    "scorevalue": 0.253
                },
            }
   {     ],
        "question": "<p>Arrange the numbers in   "value": "<p>Grapes<ascending order</p>",
        "solutions": [
          "score": 0.25  {
              },  "id": "81938f25-62b2-458d-8e23-dc0223a6c3x7",
             {   "type": "html",
                "value": "<p>Orange<<p>One</p><p>Two</p><p>Three</p><p>Four</p>",
            }
       "score": 0.25 ]
    },
    "templateId": "asq-vertical",
     }"complexityLevel": [],
       "maxScore": 1,
    ]
 "name": "ASQ Number",
    "qumlVersion": 1.1,
}     }

outcomeDeclaration

Code Block
languagejson
Code Block
languagejson
"outcomeDeclaration
"responseDeclaration": {
        "
maxScore
response1": {
            "cardinality": "ordered",
            "type": "integer",
            "
defaultValue
correctResponse":
1
{
}
}

interactions

   
"
interactions
value":
{
[
"response1":
{
"type": "order", 
 0,
"options":
[
              1,
{
                  2,
"label":
"<p>Apple</p>",
                 3
"value":
0
            ]
},
        },
{
    "mapping": [
"label": "<p>Banana</p>",
 {
                    "value":
1
0,
},
    "score": 0.25
{
     },
"label": "<p>Grapes</p>",
 {
                    "value":
2
1,
},
    "score": 0.25
{
     },
"label": "<p>Orange</p>",
 {
                    "value":
3
2,
}
    "score": 0.25
],
         },
"validation":
{
            {
"required":
"Yes"
} } }

answer

Code Block
languagehtml
Expand
titleeditor state of question
<div class='answer-container'>
  "value": 3,
<div
class='answer-body'>
<p>Apple</p>
</div> 
 "score": 0.25
<div
class='answer-body'>
<p>Banana</p>
    }
</div>
<div
class='answer-body'>
      ]
<p>Grapes</p>
</div>
 }
<div class='answer-body'>
 },
    "outcomeDeclaration": {
<p>Orange</p>
</div>
</div>

editorState

Code Block
"editorState"maxScore": {
            "optionscardinality": ["ordered",
            {
"type": "integer",
               "valuedefaultValue": {1
        }
      },
    "bodyinteractionTypes": "<p>Apple</p>",[
         "order"
    ],
     "valueinteractions": 0{
        "response1": {
      }             }"type": "order",
            {"options": [
               "value": {
                    "bodylabel": "<p>Banana<<p>One</p>",
                    "value": 10
                },
            },    {
        {                 "valuelabel": {
 "<p>Two</p>",
                  "body": "<p>Grapes</p>",     "value": 1
              "value": 2 },
               } {
           },         "label": "<p>Three</p>",
   {                 "value": {2
                },
   "body": "<p>Orange</p>",            {
        "value": 3           "label": "<p>Four</p>",
    }             }   "value": 3
    ],         "question": "<p>Arrange the fruits}
names in alphabetical order</p>",         "solutions": [],
            "validation": {
                "idrequired": "71efa845-2856-4a82-b493-101facfddd26",Yes"
            }
     "type": "html",
   }
    },
    "qType": "ASQ",
    "valueprimaryCategory": "<p>Proper order is Apple, Banana, Grapes, Orange</p>"
            }Arrange Sequence Question",
    "body": "<div class='question-body' tabindex='-1'><div class='asq-title' tabindex='0'><p>Match the following colour with the fruits</p></div><div data-match-interaction='response1' class='asq-vertical'></div></div>",
    "answer":    ]
    }

templateId

Code Block
templateId: "horizontal"/ "vertical"

primaryCategory

Code Block
"primaryCategory": "Arrange Sequence Question"

qType

Code Block
"qType": "ASQ" // This will need spec change

interactionTypes

Code Block
"interactionTypes": ["order"] // This will need spec change
"<div class='arrange-sequence-container'><div class='options'><div class='option'><p>One</p></div><div class='option'><p>Two</p></div><div class='option'><p>Three</p></div><div class='option'><p>Four</p></div></div></div>",
    "solutions": {
        "81938f25-62b2-458d-8e23-dc0223a6c3x7": "<p>Numbers in ascending order is One,Two, Three, Four</p>"
    }
}