Cloze question

Cloze question can create very flexible input by embedding various response fields into a text. A cloze question is defined defined by a list of options, some can be just a text (with no input) or input field. The options are rendered sequentially, producing the text with embedded fields.

As in choices based question the role of each option determines the kind of rendered element.

Accepted roles are :

• text : A textual part (no input)
• markdown : A markdown formatted block of text
• input: A text input field
• dateInput: A date input
• numberInput
• lineBreak
• dropDownGroup: list of choices (items property of the options defines the choice list)

Component

Cloze question

We can put a text and ask for an number

Then we can continue with another text and ask for a date

date_range

or a year-month

date_range

or a drop down

Option 1Option 1

Code (case-editor-tools)

SurveyItems.clozeQuestion({
    itemKey:'t1',
    parentKey:'test',
    questionText: textMap("Cloze question"),
    items:[
        {key: '0', role:'text', content: textMap("We can put a text and ask for an number")},
        {key: '1', role:'numberInput'},
        {key: '2', role:'text', content: textMap("Then we can continue with another text and ask for a date")},
        {key: '3', role:'dateInput'},
        {key: '4', role:'text', content: textMap("or a year-month")},
        {key: '5', role:'dateInput', optionProps: {'dateInputMode':'YM'}},
        {key: '6', role:'text', content: textMap("or a drop down")},
        {key: '7', role:'dropDownGroup', items: [ 
            {'key': '1', content: textMap("Option 1"), role:'option'},
            {'key': '2', content: textMap("Option 1"), role: 'option'},
            
        ]},
        

    ]
  });
  

To simplify code, helpers textMap() and text() generate respectively a Map and a Localized Text for the english text provided. See Internationalization for more details of translation.

JSON

{
  "key": "test.t1",
  "components": {
    "role": "root",
    "order": {
      "name": "sequential"
    },
    "items": [
      {
        "role": "title",
        "content": [
          {
            "code": "en",
            "parts": [
              "Cloze question"
            ],
            "resolvedText": "Cloze question"
          }
        ]
      },
      {
        "key": "rg",
        "role": "responseGroup",
        "items": [
          {
            "key": "cloze",
            "role": "cloze",
            "items": [
              {
                "key": "0",
                "role": "text",
                "content": [
                  {
                    "code": "en",
                    "parts": [
                      "We can put a text and ask for an number"
                    ],
                    "resolvedText": "We can put a text and ask for an number"
                  }
                ]
              },
              {
                "key": "1",
                "role": "numberInput",
                "dtype": "number"
              },
              {
                "key": "2",
                "role": "text",
                "content": [
                  {
                    "code": "en",
                    "parts": [
                      "Then we can continue with another text and ask for a date"
                    ],
                    "resolvedText": "Then we can continue with another text and ask for a date"
                  }
                ]
              },
              {
                "key": "3",
                "role": "dateInput"
              },
              {
                "key": "4",
                "role": "text",
                "content": [
                  {
                    "code": "en",
                    "parts": [
                      "or a year-month"
                    ],
                    "resolvedText": "or a year-month"
                  }
                ]
              },
              {
                "key": "5",
                "role": "dateInput",
                "properties": {}
              },
              {
                "key": "6",
                "role": "text",
                "content": [
                  {
                    "code": "en",
                    "parts": [
                      "or a drop down"
                    ],
                    "resolvedText": "or a drop down"
                  }
                ]
              },
              {
                "key": "7",
                "role": "dropDownGroup",
                "items": [
                  {
                    "key": "1",
                    "role": "option",
                    "content": [
                      {
                        "code": "en",
                        "parts": [
                          "Option 1"
                        ],
                        "resolvedText": "Option 1"
                      }
                    ]
                  },
                  {
                    "key": "2",
                    "role": "option",
                    "content": [
                      {
                        "code": "en",
                        "parts": [
                          "Option 1"
                        ],
                        "resolvedText": "Option 1"
                      }
                    ]
                  }
                ],
                "order": {
                  "name": "sequential"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}