challenge-block

Description

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

Import from bit.dev

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

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

import ChallengeBlock from '@bit/clui.nui-ui.blocks.challenge.challenge-block';

Props

Below are the props defined for this component:

Instruction

Sample instructionSteps object

[
  {
    id: 1,
    html: `<h3>WELCOME TO A CHALLENGE TUTORIAL</h3> <p>This tutorial will show you how challenges work.</p> <p>Don't worry, tutorials are not assessed. They are just to get familiar with the controls.</p> <p>Challenges allow you to apply your knowledge of the rules and behaviours in a simulated environment.</p> <p>NOTE: This challenge will launch in full screen.</p>`
  },
  {
    id: 2,
    html: `<p>During a question you may need to click the blue arrows, drag or swipe to reveal the left and right edges of the simulated environment.</p> <p><b>TIP:</b> You may find more road users to click on as you explore the edges.</p> <img src="https://preptmr.clui.com/public/TMR/prepl/assets/images/tutorial_01.png" width="1483" height="839" alt="">`
  },
  {
    id: 3,
    html: `<p>You may need to click a marker to select a road user.</p> <p>Sometimes you may need to click a marker above your steering wheel to select your own vehicle.</p> <img src="https://preptmr.clui.com/public/TMR/prepl/assets/images/tutorial_02.png" width="1483" height="839" alt="">`
  },
  {
    id: 4,
    html: `<p>You may need to click on call-outs to enlarge points of interest.</p> <img src="https://preptmr.clui.com/public/TMR/prepl/assets/images/tutorial_03.png" width="1483" height="839" alt="">`
  },
  {
    id: 5,
    html: `<p>Once you are happy with your answer, you can click Submit.</p> <p><b>TIP</b>: You may need to select multiple answers to correctly answer a question.</p> <img src="https://preptmr.clui.com/public/TMR/prepl/assets/images/tutorial_04.png" width="1483" height="839" alt="">`
  },
  {
    id: 6,
    html: `<p>If you need to view the video again, you can click the replay button.</p> <p><b>TIP</b>: Don't forget to read the 'hint' to help you answer the question.</p> <img src="https://preptmr.clui.com/public/TMR/prepl/assets/images/tutorial_05.png" width="1483" height="839" alt="">`
  },
  {
    id: 7,
    html: `<p>You have reached the end of the tutorial.</p> <p>The challenges is up next!</p> <p>You'll need to answer 16 out of 20 questions correctly to pass.</p> <p>You have unlimited attempts. Good luck!</p>`
  }
]