Order Question

An order question component that asks student to bring a collection of elements into the correct order.

Example:

<OrderQuestion
    question="Order the letters alphabetically"
    options={[
        { id: 0, text: "A" },
        { id: 1, text: "G" },
        { id: 2, text: "V" },
        { id: 3, text: "W" },
        { id: 4, text: "Y" },
        { id: 5, text: "Z" }
    ]}
/>

Open interactive preview

Options:

  • question | string: question for which the student has to bring the available options into the correct order. Default: ''.
  • options | array (required): an array of objects with id and text keys which the student has to bring into the correct ordering, which is assumed to be the supplied order. Default: none.
  • provideFeedback | boolean: controls whether to show a notification displaying whether the submitted answer is correct or not. Default: true.
  • hintPlacement | string: placement of the hints (either top, left, right, or bottom). Default: 'bottom'.
  • hints | array<string>: hints providing guidance on how to answer the question. Default: [].
  • feedback | boolean: controls whether to display feedback buttons. Default: false.
  • chat | boolean: controls whether the element should have an integrated chat. Default: false.
  • failureMsg | string: message to be displayed when student submits a wrong answer. Default: 'Not quite, try again!'.
  • successMsg | string: message to be displayed when student submits the correct answer. Default: 'That's the correct ordering!'.
  • onChange | function: callback which is triggered after dragging an element; has two parameters: a boolean indicating whether the elements were placed in the correct order and and array with the current ordering. Default: onChange() {}.
  • onSubmit | function: callback invoked when answer is submitted; has as a sole parameter a boolean indicating whether the elements were placed in the correct order. Default: onSubmit() {}.

results matching ""

    No results matching ""