@southmedia/quiz
v1.0.7
Published
Lightweight JavaScript quiz library
Downloads
12
Maintainers
southmediaReadme
Quiz
Lightweight JavaScript quiz library
Features
-[x] Custom next step render -[x] Independent answers -[ ] Multiple choice
Installation and Usage
Install the library with npm install @southmedia/quiz or yarn @southmedia/quiz
ES6
import Quiz from "@southmedia/quiz"Example
With use custom template:
new Quiz('[data-quiz-inline]', {
defaultTemplate: false, // For disabled usage default template
customLabel: 'template-quiz-answer', // This point with usage custom render template for answers ` id template `
onStart: (selector, length) => {
/**
* selector - parent HTMLElement
* length - quantity questions
*/
},
onChange: (oldIndex, newIndex, length, selector) => {
/**
* oldIndex - previos index
* newIndex - current index
* length - quantity questions
* selector - parent HTMLElement
*/
},
onComplete: (selector, arr, length) => {
/**
* selector - parent HTMLElement
* arr - selected answers
* length - quantity questions
*/
},
onError: (selector, err) => {
/**
* selector - parent HTMLElement
* err - error message
*/
}
})With use html template
<div class="quiz" data-quiz-inline>
<div class="quiz__step" data-quiz-question>
<h3 data-quiz-question-name>Question 1</h3>
<div data-quiz-answers-container>
<label data-quiz-answer data-value="Answer 1"
data-quiz-dependent="Answer for next question 1|"
>Answer 1</label>
<label data-quiz-answer data-value="Answer 2"
data-quiz-dependent="Answer for next question 1|Answer for next question 2"
>Answer 2</label>
</div>
<div data-quiz-back>Back</div>
</div>
<div class="quiz__step" data-quiz-question>
<h3 data-quiz-question-name>Question 2</h3>
<div data-quiz-answers-container><!-- dependent questions from the first step will be rendered here --></div>
<div data-quiz-back>Back</div>
</div>
<div class="quiz__step" data-quiz-question>
<h3 data-quiz-question-name>Question 3</h3>
<div data-quiz-answers-container>
<label data-quiz-answer data-value="Answer 1">Answer 1</label>
<label data-quiz-answer data-value="Answer 2">Answer 2</label>
</div>
<div data-quiz-back>Back</div>
</div>
</div>If template for [data-quiz-answer] differ from the default, then you need to add a new template to the page
<template id="template-quiz-answer">
<label class="quiz-label quiz-label--custom" {data-template-quiz-label}>
<span class="quiz-label__box"></span>
<span class="quiz-label__text">{data-template-quiz-label-text}</span>
</label>
</template>With use default template
Ability to use dynamic questions/answers
new Quiz('[data-quiz]', {
customLabel: 'template-quiz-answer', // This point with usage custom render template for answers ` id template `
title: "Title Quiz",
desc: "Lorem ipsum",
questions: [
{
title: "Inside which HTML element do we put the JavaScript?",
answer: [
{
name: "<script>",
questions: [
{
title: "Where is the correct place to insert a JavaScript?",
answer: [
{
name: "The <head> section"
},
{
name: "The <body> section"
},
{
name: "Both the <head> section and the <body> section are correct"
}
]
}
]
},
{
name: "<javascript>",
questions: [
{
title: "What is the correct syntax for referring to an external script called 'xxx.js'?",
answer: [
{
name: "<script href='xxx.js'>"
},
{
name: "<script name='xxx.js'>"
},
{
name: "<script src='xxx.js'>"
}
]
}
]
},
{
name: "<scripting>",
questions: [
{
title: "The external JavaScript file must contain the <script> tag.",
answer: [
{
name: "True"
},
{
name: "False"
}
]
}
]
},
{
name: "<js>",
questions: [
{
title: "How do you write 'Hello World' in an alert box?",
answer: [
{
name: "alert(Hello World)"
},
{
name: "alertBox('Hello World');"
},
{
name: "msg('Hello World');"
},
{
name: "alert('Hello World')"
},
{
name: "msgBox('Hello World')"
}
]
}
]
},
]
}
],
onStart: (selector, length) => {
/**
* selector - parent HTMLElement
* length - quantity questions
*/
},
onChange: (oldIndex, newIndex, length, selector) => {
/**
* oldIndex - previos index
* newIndex - current index
* length - quantity questions
* selector - parent HTMLElement
*/
},
onComplete: (selector, arr, length) => {
/**
* selector - parent HTMLElement
* arr - selected answers
* length - quantity questions
*/
},
onError: (selector, err) => {
/**
* selector - parent HTMLElement
* err - error message
*/
}
})