nes-block-image-question

First write a description of what your custom block does. It may be helpful to include a GIF or screenshot of it in action, but isn't required.

Installation

To install this block, you need to run:

yarn install nes-block-image-question

Then, go to src/blocks.js and import+export your block:

// STANDARD BLOCKS //
... 

// CUSTOM BLOCKS //
import ImageQuestion from 'nes-block-image-question';

// EXPORT LIST //
export default {
  ...
  ImageQuestion
}

Now your block should be available for use!

Usage

In your src/assets/json/parcel.json file, you will want to add a block with the following formatting:

Each of the below sections represents a different type of input for the user to enter.

Numeric (not yet available)

{
    "id": 1,
    "type": "ImageQuestion",
    "details": {
        "url": "cat.jpg",
        "imageAlt": "",
        "answerType": "numeric",
        "question": "What is less than two?",
        "correctAnswers": [0, 1],
        "reasonsIncorrect": {
            2: "two is too many",
            3: "three is just silly"
        }
    }
}

Text Input

{
    "id": 1,
    "type": "ImageQuestion",
    "details": {
        "url": "cat.jpg",
        "imageAlt": "",
        "answerType": "dropdown",
        "question": "What question would you like to ask?",
        "correctAnswers": ["option1"],
        "reasonsIncorrect": {
            "answer": "reason",
            "no": "dont be so negative"
        }
    }
}

Dropdown

{
    "id": 1,
    "type": "ImageQuestion",
    "details": {
        "url": "cat.jpg",
        "imageAlt": "",
        "answerType": "dropdown",
        "answerChoices":["option1", "option2", "option3"],
        "question": "What question would you like to ask?",
        "correctAnswers": ["option1"],
        "reasonsIncorrect": {
            "answer": "reason",
            "no": "dont be so negative"
        }
    }
}

Images

{
    "id": 1,
    "type": "ImageQuestion",
    "details": {
        "answerType": "image",
        "question": "What question would you like to ask?",
        "answerChoices":["option1.jpg", "option2.jpg", "option3.jpg"],
        "correctAnswers": ["option1.jpg"],
        "reasonsIncorrect": {
            "option3.jpg": "reason"
        }
    }
}