Questions
The question components are standalone, self-grading interactive questions. SingleChoiceQuestion uses a radio group, MultipleChoiceQuestion uses checkboxes, and NumericQuestion accepts a numeric input with a tolerance. Graded state is in-memory only (not persisted).
Which of these is a JavaScript runtime?
Which of these is a JavaScript runtime?
// apps/docs/src/components/examples/questions/single/react.tsx
import { SingleChoiceQuestion } from '@cloudvoyant/helical-react';
export default function ReactQuestionSingle() {
return (
<SingleChoiceQuestion
id="single-demo"
prompt="Which of these is a JavaScript runtime?"
choices={['Python', 'Node.js', 'Ruby', 'Go']}
correct={1}
explanation="Node.js runs JavaScript outside the browser."
/>
);
}<!-- apps/docs/src/components/examples/questions/single/svelte.svelte -->
<script lang="ts">
import { SingleChoiceQuestion } from '@cloudvoyant/helical-svelte';
</script>
<SingleChoiceQuestion
id="single-demo"
prompt="Which of these is a JavaScript runtime?"
choices={['Python', 'Node.js', 'Ruby', 'Go']}
correct={1}
explanation="Node.js runs JavaScript outside the browser."
/>Examples
Multiple
Select the primitives.
Select the primitives.
// apps/docs/src/components/examples/questions/multiple/react.tsx
import { MultipleChoiceQuestion } from '@cloudvoyant/helical-react';
export default function ReactQuestionMultiple() {
return (
<MultipleChoiceQuestion
id="multiple-demo"
prompt="Select the primitives."
choices={['string', 'number', 'widget', 'boolean']}
correct={[0, 1, 3]}
explanation="Widget is not a primitive."
/>
);
}<!-- apps/docs/src/components/examples/questions/multiple/svelte.svelte -->
<script lang="ts">
import { MultipleChoiceQuestion } from '@cloudvoyant/helical-svelte';
</script>
<MultipleChoiceQuestion
id="multiple-demo"
prompt="Select the primitives."
choices={['string', 'number', 'widget', 'boolean']}
correct={[0, 1, 3]}
explanation="Widget is not a primitive."
/>Numeric
units
units
// apps/docs/src/components/examples/questions/numeric/react.tsx
import { NumericQuestion } from '@cloudvoyant/helical-react';
export default function ReactQuestionNumeric() {
return (
<NumericQuestion
id="numeric-demo"
prompt="What is 2 + 2?"
answer={4}
tolerance={0.5}
unit="units"
explanation="Basic arithmetic."
/>
);
}<!-- apps/docs/src/components/examples/questions/numeric/svelte.svelte -->
<script lang="ts">
import { NumericQuestion } from '@cloudvoyant/helical-svelte';
</script>
<NumericQuestion
id="numeric-demo"
prompt="What is 2 + 2?"
answer={4}
tolerance={0.5}
unit="units"
explanation="Basic arithmetic."
/>API Reference
Single: id, prompt, choices, correct (index), explanation. Multiple: id, prompt, choices, correct (indices), explanation. Numeric: id, prompt, answer, tolerance, unit, explanation.