...

This document describes the problem statement and design for enabling the FTB in the (New) QuestionSet Editor. approach for enhancing the inQuiry editor and player to support the creation and consumption of the FTB question.

JIRA Issue:

Background 

As we are deprecating the ECML IQ-245, IQ-273

Background 

As we are deprecating the ECML Question creation inside the Interactive content editor. So inQuiry would need to have a suitable substitute for all its used capabilities in the (New) Question set editor and Player.

Here’s a list of features currently available and supported by the Interactive Content Editor for FTB Question.  

1. There should be at least one blank 

2. Blanks can be created by using square brackets [[ ]] to indicate words to be made blank in a sentence 

3. Use square brackets [[ ]] to indicate blanks in the sentence. The words between [[ ]] will appear as blanks to students. 

   1. Example: 'The tree is [[tall]] and [[strong]].' The question will be created as: 'The tree is _______ and _______.' The correct answers will be 'tall' and 'strong'. 

4. Multiple blanks are supported 

5. Keyboard type: 

6. System (Android / OS) 

English (A

Multiple blanks are supported 

7. Keyboard type: 

   1. System (Android / OS) 

   2. English (A-Z, not QWERTY) 

   3. Numbers only 

   4. 26 keys configurable 

8. Partial scoring 

9. Unordered evaluation 

10. Add Image and Audio to Question or Option 

11. Add Math & Scientific Text (Formulae & Equation) to Question or Option 

Problem Statement 

Currently, the QuestionSet editor/Player does not support FTB Question creation .  How and consumption workflow.  How can inQuiry enable the same capabilities in the new QuestionSet Editor and Player with the same features supported by the existing Interactive editor and player? 

Solution

In this solution, inQuiry will use the same code and functionality used in the interactive editor. 

The inquiry will build a new CKEditor 5 plugin that helps users to create blanks using square brackets [[]] to indicate words instead of typing manually square brackets in the textarea. 

1. A button will be present in the toolbar similar to other buttons like Bold, Heading, etc... 

2. The user will be able to add blanks as below: 

   1. Using the button available in the toolbar. 

   2. By typing manually in the textarea. 

   3. Select the words first then click on the button available in the toolbar. 

3. The button will act as a toggle so by clicking on the button again, blanks can be removed and selected words will be converted into normal text. 

We will use the existing code to extract the answers from the questions. Here’s the sample link: 

https://github.com/project-sunbird/sunbird-content-plugins/blob/release-5.2.0/org.ekstep.questionunit.ftb-1.1/editor/controllers/ftb-controller.js  

Keyboards: 

As of now, the following keyboard types are supported by the old editor: 

• Device  

• English 

• Custom   

This custom keyboard is written in pure javascript as a plugin embedded in the interactive editor loads based on needs and does not use any third-party library. So inQuiry will check the feasibility of this plugin and try to integrate it as is it. 

Here are the diff types of the sample configuration for each type:

1. Device -

   Code Block
   "keyboardConfig":{"keyboardType":"Device","customKeys":""}

2. English -

   Code Block
   "keyboardConfig":{"keyboardType":"English","customKeys":""}

3. Custom -

   Code Block
   "keyboardConfig":{"keyboardType":"Custom","customKeys":"h,v,t,m,n"}

We will store this configuration as part of the question metadata as this is an additional configuration given to the editor. This property has to be updated in the question schema file as below:

"keyboardConfig": {
      "type": "object",
      "items": {
        "type": "string",
        "enum": [
          "Device",
          "English",
          "Custom"
        ],
        "default": "Device"
      }
}

Media: Image + Audio 

All the images will be stored the way we are storing the images for the others type. 

• The creator should be able to create the Fill In The Blank question with multiple blanks.

• The creator should be able to add the image and Math & Scientific Text (Formulae & Equation) to the Question

• The creator should be able to define scoring and configure the evaluation unordered configuration.

• The consumer should be able to consume the FTB question created by the creator.

Design

In this design approach, inQuiry will cover the creation and consumption workflow changes along with the FTB Data model as per QuML spec.

Creation workflow:

...

• For creating the question, inQuiry will use the same question component used for other question types.

• The creator can create the blanks using square brackets [[ ]] to indicate words to be made blank in a sentence.

  • The words between [[ ]] will appear as blanks in a player. 
    Example: 'The tree is [[tall]] and [[strong]].'
    The question will be created as: 'The tree is _______ and _______.'
    The correct answers will be tall and strong. 

• The editor will throw a validation error if the question does not contain any answers.

• When a blank is inserted, Answers will be extracted from the question using the regular expression (Ex. /(?:^|)\[\[(.*?(?:\]\]|$)/g )

  • We will refer to the existing code to extract the answers from the questions. Here’s the link: https://github.com/Sunbird-Knowlg/sunbird-content-plugins/blob/c7c385c7c3848f4fdeabd4f889a46675ef608cf3/org.ekstep.questionunit.ftb-1.1/editor/controllers/ftb-controller.js#L124

• The current QuestionSet editor has the capability to add the image and Math & Scientific Text to the question. So We will use the same question component for adding the same.

• Question with multiple answers will have Scoring Logic = PARTIAL by default. Thus,

  • All responses entered as correct will get equal marks. The total marks of the question will be divided equally amongst all responses

• Partial scoring and unordered evaluation configuration will be stored as part of the question metadata as below:

  Code Block
  { .... "evalUnordered": false, "partialScore": true }

  • These configurations required changes in the question schema file.

• All media images will be stored the way we are storing the images for the others question type. For example:

  Code Block

  // Question HTML <figure class="image"> <img src="/assets/public/content/assets/do_2136875639892623361238/download-1.jpg" alt="download (1)" data-asset-variable="do_2136875639892623361238"> </figure> <p>Who is this ?</p>   // Media body of question "media": [{  "id": "do_2136875639892623361238",  "type": "image",  "src": "/assets/public/content/assets/do_2136875639892623361238/download-1.jpg",  "baseUrl": "https://dev.inquiry.sunbird.org"  }]

  (Note: The audio workflow will be not enabled in the new FTB workflow as the new question set editor and QuML Player does not have any audio feature

...

Here is the existing media sample:

// HTML
<figure class="image">
  <img src="/assets/public/content/assets/do_2136875639892623361238/download-1.jpg" alt="download (1)" 
  data-asset-variable="do_2136875639892623361238">
</figure>
<p>Who is this ?</p>  

"media": [ { 
"id": "do_2136875639892623361238", 
"type": "image", 
"src": "/assets/public/content/assets/do_2136875639892623361238/download-1.jpg", 
"baseUrl": "https://dev.inquiry.sunbird.org" 
} ]  

Partial scoring

A Scoring Logic can have the following values:

• ALL

  • Full marks are assigned only when all the correct answers are entered.

• PARTIAL

  • Partial scores are assigned of any one or more correct answers entered. The total marks of the question will be divided equally amongst all responses.

Unordered evaluation

An Unordered evaluation Logic can have the following values:

• TRUE

  • Answers entered in an unordered sequence will be considered correct answers.

• FALSE

  • Answers entered in an unordered sequence will be not considered correct answers.

...

TRUE

...

FALSE

...

Q: The color on the Indian flag are ____ , _____ , _____.
A: The color on the Indian flag are green , white , saffron.
User gets full marks for filling the blanks giving the all the 3 answers

OR

Q: The color on the Indian flag are ____ , _____ , _____.

A: The color on the Indian flag are red , white , saffron.

User gets 2/3 marks for entering one of the blanks with the correct answer when partial scoring enabled

Q: The color on the Indian flag are ____ , _____ , _____.
A: The color on the Indian flag are saffron , white , green.
User gets full marks when all the answers are in valid order

...

OR

...

FTB Data Model

Here’s the new schema structure for the FTB which is as per QuML compliance. 

...

• support)
  

Consumption workflow:

When rendering the question on the player, consider the following:

• The QuML Player will read the question properties and replace all blanks with a <input> tag as per the QuML spec format. Here’s a sample example:

  Code Block
  The tree is <input type="text" data-text-interaction data-response-variable="response1"/> and <input type="text" data-text-interaction data-response-variable="response2" />

...

For Replacing of the blank with <input> tag we will refer to the existing code. blank-to-input-tag

• Ignoring of white-space and case sensitive will be considered by default at the player level.

By default, The below points will be considered during the evaluation:

1. All user answers will be converted to lowercase and compared against each of the answer variations after converting them also to lowercase.

2. Consider removing white spaces from the user answer and the expected answer variations (trim and also remove embedded white spaces)

Partial scoring

A Scoring Logic can have the following values:

• ALL

  • Full marks are assigned only when all the correct answers are entered.

• PARTIAL

  • Partial scores are assigned of any one or more correct answers entered. The total marks of the question will be divided equally amongst all responses.

The default value of Scoring Logic will be PARTIAL

Unordered evaluation

An Unordered evaluation Logic can have the following values:

• TRUE

  • Answers entered in an unordered sequence will be considered correct answers.

• FALSE

  • Answers entered in an unordered sequence will be not considered correct answers.

The default value of Unordered evaluation will be FALSE

FTB Data Model

The editorState will have two properties called options and question to support storing the multiple values for each blank. This entire block is for the editor’s use. These values are saved as they are entered by the creator.
The question content is obtained from CKEditor will contain the HTML markup of the question text.

For example, <p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>

interactions are the pre-processed data for the player’s use. All the values are converted to lowercase and removed white spaces depending on the evaluation needed on the player side.

responseDeclaration is contain the expected matching indices when comparing the user answers against the expected answers array.

Here’s the new schema structure for the FTB which is as per QuML compliance.

Solution 1 (Recommended) :

{
  "editorState": {
    "options": [
      {
        "answer": true,
        "value": {
          "body": "New Delhi",
          "value": 0
        }
      },
      {
        "answer": true,
        "value": {
          "body": "New York",
          "value": 1
        }
      }
    ],
    "question": "<p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>"
  },
  "body": "<p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>",
  "responseDeclaration": {
    "response1": {
      "cardinality": "single",
      "type": "string",
      "correctResponse": {
        "value": ["New Delhi", "New York"]
      },
      "mapping": [
        {
          "response": "New Delhi",
          "outcomes": {
            "score": 0.5
          }
        },
        {
          "response": "New York",
          "outcomes": {
            "score": 0.5
          }
        }
      ]
    }
  },
  "outcomeDeclaration": {
    "maxScore": 1
  },
  "interactionTypes": [
    "text"
  ],
  "media": [
    {
      "id": "do_2136875567564144641233",
      "type": "image",
      "src": "/assets/public/content/assets/do_2136875567564144641233/download.jpg",
      "baseUrl": "https://dev.inquiry.sunbird.org"
    }
  ],
  "name": "Fill In The Blanks",
  "mimeType": "application/vnd.sunbird.question",
  "objectType": "Question",
  "primaryCategory": "FTB Question",
  "qType": "FTB"
}

In QuML spec https://github.com/sunbird-specs/QuML/blob/master/v1/question-schema.json#L344 the mapping definition does not allow storing of value as string, it’s value type is defined as number

We need to update the spec to support this schema structure.

Pros:

• This approach requires minimal effort to implement.

• Creating the views for both editor and player becomes easier with this structure.

• No need to store the interaction properties as we are storing values as it is.

• Reduce the payload size compare to solution 1 and solution 2.

• Players can easily evaluate the question by comparing the user answers against the expected correctResponse array.

Cons:

• The proposed structure is different from the current structure supported by the QuML spec.

Solution 2:

{
  "editorState": {
    "options": [{
        "answer": true,
        "value": {
          "body": "New Delhi",
          "value": 0
        }
      },
      {
        "answer": true,
        "value": {
          "body": "New York",
          "value": 1
        }
    }],
    "question": "<figure class="image"><img src="/assets/public/content/assets/do_2136875567564144641233/download.jpg" alt="download" data-asset-variable="do_2136875567564144641233"></figure><figure class="image"><img src="/assets/public/content/assets/do_2136875567564144641233/download.jpg" alt="download" data-asset-variable="do_2136875567564144641233"></figure>
        <p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>"
  },
  "body": "<figure class="image"><img src="/assets/public/content/assets/do_2136875567564144641233/download.jpg" alt="download" data-asset-variable="do_2136875567564144641233"></figure>
        <p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>",
  "interactions": {
    "response1": {
      "type": "text",
      "options": [{
          "label": "New Delhi",
          "value": 0
        },
        {
          "label": "New York",
          "value": 1
        }
      ]
    },
    "validation": {
      "required": "Yes"
    }
  },
  "responseDeclaration": {
    "response1": {
      "cardinality": "multiple",
      "type": "string",
      "correctResponse": {
        "value": [
          "0",
          "1"
        ]
      },
      "mapping": [
        {
          "response": 0,
          "outcomes": {
            "score": 0.5
          }
        },
        {
          "response": 1,
          "outcomes": {
            "score": 0.5
          }
        }
      ]
    }
  },
  "outcomeDeclaration": {
    "maxScore": 1
  },
  "interactionTypes": [
    "text"
  ],
  "media": [{
    "id": "do_2136875567564144641233",
    "type": "image",
    "src": "/assets/public/content/assets/do_2136875567564144641233/download.jpg",
    "baseUrl": "https://dev.inquiry.sunbird.org"
  }],
  "name": "Fill In The Blanks",
  "mimeType": "application/vnd.sunbird.question",
  "objectType": "Question",
  "primaryCategory": "FTB Question",
  "qType": "FTB",
  "keyboardConfig": {
    "type": "Device",
    "customKeys": ""
  }
}

Pros:

• This structure is similar to the existing MCQ question structure.

Cons:

• The player needs to perform more operations to evaluate the question as we are storing the value as an index under responseDeclaration.

• Interactions for FTB will only be used for getting the matching indices when comparing the user answers against the expected answers array.

Solution 3:

{
  "editorState": {
    "options": [
      {
        "answer": true,
        "value": {
          "body": "New Delhi",
          "value": 0
        }
      },
      {
        "answer": true,
        "value": {
          "body": "New York",
          "value": 1
        }
      }
    ],
    "question": "<p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>"
  },
  "body": "<p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>",
  "interactions": {
    "response1": {
      "type": "text",
      "options": [
        {
          "label": "New Delhi",
          "value": 0
        }
      ]
    },
    "response2": {
            "score": 0.5"type": "text",
      "options": [
   }     {
   },       "label": "New {York",
          "responsevalue": 1,
        }
  "outcomes": {   ]
    },
    "scorevalidation": 0.5{
      "required": "Yes"
  }  }
      },
  "responseDeclaration": {
  ]  "response1": {
 }   },  "cardinality": "outcomeDeclarationsingle":,
 {     "maxScoretype": 1"string",
   },   "mediacorrectResponse": {
[],   "body": "<p>capital of india is [[New Delhi]]. and capital of USA is [[New York]]</p>",
  "editorState": { "value": "0"
      },
      "optionsmapping": [
        {
          "answerresponse": true"0",
          "valueoutcomes": {
            "bodyscore": "New Delhi", 0.5
          }
   "value": 0    }
    }  ]
    },
     "response2": {
      "cardinality": "single",
      "answertype": true"string",
 
      "valuecorrectResponse": {
 
        "bodyvalue": "New York",1"
      },
      "valuemapping": 1[
        }{
      }     ],
    "question"response": "1"<p>capital,
of india is [[New Delhi]]. and capital of USA is [[New York]]</p>"
  },   "interactionsoutcomes": {
    "response1": {        "score": 0.5
        "type": "text", }
     "options": [  }
      {]
    }
  },
  "labeloutcomeDeclaration": "New{
Delhi",    "maxScore": 1
  },
  "valueinteractionTypes": 0[
    "text"
   }],
  "media": [
    {
          "labelid": "New Yorkdo_2136875567564144641233",
   
      "valuetype": 1"image",
      "src":  }"/assets/public/content/assets/do_2136875567564144641233/download.jpg",
       ]"baseUrl": "https://dev.inquiry.sunbird.org"
    },
  ],
  "validationname": {"Fill In The  Blanks",
  "requiredmimeType": "Yes"application/vnd.sunbird.question",
  "objectType": "Question",
 } "primaryCategory": "FTB }Question",
  "interactionTypesqType": ["FTB",
    "textkeyboardConfig": {
 ],   "nametype": "Fill In The Blanks "Device",
    "mimeTypecustomKeys": "application/vnd.sunbird.question", "mimeType": "application/vnd.sunbird.question",
  "objectType": "Question",
  "primaryCategory": "FTB Question",
  "qType": "FTB",
  "keyboardConfig": {
    "type": "Device",
    "customKeys": ""
  }
}"
  }
}

Pros:

• This structure can define separate behavior for each response.

• Support multiple data types for each response.

Cons:

• Increase the player complexity to evaluate the question.

• Increase the question payload size as we are storing each answer in a separate response for multiple properties.
  For example, response1 and response2 have similar structures. As the number of responseVariables increases this structure will repeat multiple times and each will be storing the same data such as cardinality, type