Interactive Quiz System
Reusable quiz component for Bitcoin learning modules
Features
- Multiple question types: Multiple Choice, True/False, Multi-Select
- Immediate feedback with explanations
- Beautiful animations and visual feedback
- Score tracking and progress persistence
- Mobile-responsive design
- Integrates with existing progress tracking
- Customizable passing scores and retry options
- Question and option shuffling support
Bitcoin Basics Quiz
Try out the quiz system with some fundamental Bitcoin questions:
How to Use
Integrating the quiz widget into your module is simple:
1. Include the CSS and JS
<link rel="stylesheet" href="/css/quiz.css">
<script src="/js/widgets/quiz.js"></script>2. Add a Quiz Container
<div class="quiz-container" data-quiz-id="my-quiz"></div>3. Initialize the Quiz
<script>
const quiz = new BitcoinQuiz('my-quiz', {
title: 'Module 1 Quiz',
description: 'Test your knowledge',
questions: [
{
type: 'multiple-choice',
question: 'What is Bitcoin?',
options: ['A company', 'A digital currency', 'A person'],
correctAnswer: 1,
explanation: 'Bitcoin is a decentralized digital currency.'
}
],
passingScore: 70,
path: 'pragmatist',
module: '1-1'
});
// Store reference globally
window.quizInstances = window.quizInstances || {};
window.quizInstances['my-quiz'] = quiz;
</script>Question Types
Multiple Choice
{
type: 'multiple-choice',
question: 'Your question here',
options: ['Option A', 'Option B', 'Option C', 'Option D'],
correctAnswer: 1, // Index of correct option
explanation: 'Why this is correct...'
}True/False
{
type: 'true-false',
question: 'Your statement here',
correctAnswer: true, // or false
explanation: 'Why this is true/false...'
}Multi-Select
{
type: 'multi-select',
question: 'Select all that apply',
options: ['Option A', 'Option B', 'Option C', 'Option D'],
correctAnswer: [0, 2], // Indices of all correct options
explanation: 'Why these are correct...'
}