activity-block

Description

Block for reconstructing the activity activity module. This module contains 2 part, practice and the actual activity. For the practice, the content is imported by an json object. For the activity part, the content is fetched from the nui API. Please refer to the sample practiceSteps object below and the activity boilerplate for sample usage.

Import from bit.dev

https://bit.dev/clui/nui-ui/blocks/activity/activity-block

yarn add @bit/clui.nui-ui.blocks.activity.activity-block

import ActivityBlock from '@bit/clui.nui-ui.blocks.activity.activity-block';

Props

Below are the props defined for this component:

ActivityQuestion

ActivityAnswer

Sample practiceSteps object

[
  {
    id: 1,
    variant: "PRACTICE_INSTRUCTION",
    html:
      "<p>This tutorial will show you how activities work.</p><p class='mb0'>Don't worry, tutorials are not assessed. They are just to get familiar with the controls.</p>"
  },
  {
    id: 2,
    variant: "DROP_SIGN",
    html: "Click the blank marker to see the signs you can drop. Try it now.",
    actionFeedback: "Click submit to complete the question.",
    questionData: [{ x: 27, y: 60, direction: "S" }],
    answers: [
      {
        id: 1,
        imgURL:
          "https://ausestprod.blob.core.windows.net/tmr/act_sign_a_004.svg"
      },
      {
        id: 2,
        imgURL:
          "https://ausestprod.blob.core.windows.net/tmr/act_sign_a_009.svg"
      },
      {
        id: 3,
        imgURL:
          "https://ausestprod.blob.core.windows.net/tmr/act_sign_a_010.svg"
      },
      {
        id: 4,
        imgURL:
          "https://ausestprod.blob.core.windows.net/tmr/act_sign_a_003.svg"
      }
    ],
    imgURL:
      "https://ausestprod.blob.core.windows.net/tmr/4-2/t001/bespoke/4-2_t001_b00_img_Tutorial.jpg"
  },
  {
    id: 3,
    variant: "PRACTICE_INSTRUCTION",
    html:
      "<p>This activity will test your knowledge of the road signs and the situations where they apply.</p><p>You'll need to select the correct sign based on the road markings, actions of the vehicles, or other road rules.</p><p>You'll need 7 out of 9 questions correct to pass this activity.</p><p>You can review your feedback at the end.</p><p>Good luck.</p>"
  }
]