1.0.1 • Published 4 years ago
@southmedia/smquiz v1.0.1
Quiz
Lightweight JavaScript form validation library
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 `
onChange: (oldIndex, newIndex, length, selector) => {
/**
* oldIndex - previos index
* newIndex - current index
* length - quantity questions
* selector - parent HTMLElement
*/
},
onComplete: (selector, arr) => {
/**
* selector - parent HTMLElement
* arr - selected answers
*/
},
onError: (selector, err) => {
/**
* selector - parent HTMLElement
* err - error message
*/
}
})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')"
}
]
}
]
},
]
}
],
onChange: (oldIndex, newIndex, length, selector) => {
/**
* oldIndex - previos index
* newIndex - current index
* length - quantity questions
* selector - parent HTMLElement
*/
},
onComplete: (selector, arr) => {
/**
* selector - parent HTMLElement
* arr - selected answers
*/
},
onError: (selector, err) => {
/**
* selector - parent HTMLElement
* err - error message
*/
}
})1.0.1
4 years ago