Short Answer Question

Configuration for a short answer question which accepts a text as an answer.

You can use it inline in React or in .mdx format files.

Code

import { useState } from 'react';
import { ShortAnswer, useQuestionContext } from '@scinforma/picolms';
import "@scinforma/picolms/styles.css";

export function MyQuestion() {
  const config = {
    id: 'sa-1',
    type: 'short-answer',
    question: 'What is the chemical symbol for water?',
    instructions: 'Enter your answer in the text box below',
    points: 5,
    correctAnswers: ['H2O', 'h2o'],
    caseSensitive: false,
    trimWhitespace: true,
    maxLength: 10,
    maxAttempts:5,
    placeholder: 'Enter your answer...',
    validation: {
      rules: [
        {
          type: 'required',
          message: 'Please provide an answer',
        },
        {
          type: 'maxLength',
          value: 10,
          message: 'Answer must be 10 characters or less',
        },
      ],
    },
    feedback: {
      correct: {
        type: 'correct',
        message: 'Correct! H2O is the chemical symbol for water.',
      },
      incorrect: {
        type: 'incorrect',
        message: 'Incorrect. The correct answer is H2O.',
      },
    },
  };

  const [answer, setAnswer] = useState();
  const [feedback, setFeedback] = useState();

  const handleAnswerChange = (ans) => {
    const result = config.correctAnswers.includes(ans.value) ? "Correct" : "Incorrect";
    setFeedback(result);
    setAnswer(ans)
  };

  return (
    <div>
      <ShortAnswer
        config={config}
        answer={answer}
        onAnswerChange={handleAnswerChange}
        showFeedback={true}
        showCheckButton={true}
        feedback={config.feedback}
      ></ShortAnswer>
    </div>
  );
}

<MyQuestion/>

Result

What is the chemical symbol for water?

Enter your answer in the text box below

0 / 10

5 points