Easy Dynamic quiz plugin en Pure JavaScript-ysQuiz. js

Vista prévia

Descripción

ysQuiz. js es un complemento de prueba de JavaScript de dependencia cero que le permite crear cuestionarios en línea interactivos, totalmente personalizables y pruebas con facilidad.

¿Cómo funciona?

Importe el JavaScript y la hoja de estilos necesarios en el documento.

<link rel="stylesheet" href="path/to/ysquiz.css">
<script src="path/to/ysquiz.js"></script>

Cree un contenedor para realizar la prueba.

<div class="ysquiz"></div>

Crea tus propias preguntas, respuestas y respuestas correctas de la siguiente manera:

var myQuestions = [{


question: "What is the sixth month of the year?",


answers: ["July", "August", "May", "April"],


correct: "June"

}, {


question: "Fill in the missing number: 24, 31, 38, 45, 52, ?",


answers: ["54", "23", "65", "44"],


correct: "59"

}, {


question: "Which of the dates below is the latest?",


answers: ["February 20, 1992", "June 14, 1929", "May 31, 1992", "June 6, 1929"],


correct: "October 14, 1992"

}, {


question: "A clock lost 2 minutes and 20 seconds in 40 days. How many seconds did it lose per day?",


answers: ["1.5", "2", "2.5", "3"],


correct: "3.5"

}, {


question: "A test has 30 questions. If Tom gets 70% correct, how many questions did Tom get wrong?",


answers: ["7", "8", "10", "6"],


correct: "9"

}];

Inicialice el complemento ysQuiz. js para generar un cuestionario básico.

var myQuiz = new ysQuiz(myQuestions);

Aplica tus propios estilos a la prueba.

.ysquiz {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

background-color: #f5f5f5;

padding: 7px 15px;

border-radius: 5px;

margin: 0 auto;

max-width: 500px!important
}
.ysquiz .ysquiz-header h1 {

margin: 0;

text-align: center
}
.ysquiz .ysquiz-content .ysquiz-question ul {

padding: 0;

list-style: none
}
.ysquiz .ysquiz-content .ysquiz-question ul li {

padding: 5px 0
}
.ysquiz .ysquiz-content .ysquiz-question button {

border: none;

padding: 10px 20px;

background-color: teal;

color: #fff;

opacity: .5;

transition-duration: .3s;

border-radius: 3px
}
.ysquiz .ysquiz-content .ysquiz-question button:hover {

opacity: 1
}
.ysquiz .ysquiz-content .ysquiz-result {

text-align: center
}
.ysquiz .ysquiz-content .ysquiz-result p {

color: #fff;

padding: 10px
}
.ysquiz .ysquiz-content .ysquiz-result .ysquiz-total-question {

background-color: #343a40
}
.ysquiz .ysquiz-content .ysquiz-result .ysquiz-total-correct {

background-color: #28a745
}
.ysquiz .ysquiz-content .ysquiz-result .ysquiz-total-wrong {

background-color: #dc3545
}

Opciones completas de plugins para personalizar la prueba.

var myQuiz = new ysQuiz(myQuestions,{



// Selectors


wrapper: '.ysquiz',



// Quiz title


title: 'ysQuiz',



// Quiz enumerator


enumerator: true



});

Añade nuevas preguntas al cuestionario.

myQuiz.addQuestion("Question", ["Answer 1", "Answer 2", "Answer 3"], "Answer 2");

Destruye el cuestionario.

myQuiz.destroy();