Quiz provider platform
Use either script tag or iframe.
You can use script tag and specify container element.
<script src="//www.quizgnome.com/quiz-url?container=<your-div-id>"></script>
Example
<div id="quiz-container">
</div>
<script src="//www.quizgnome.com/quiz-url?container=quiz-container"></script>
or add script tag in the container
<div class="container">
<!-- Quiz will be render here -->
<script src="//www.quizgnome.com/quiz-url"></script>
</div>
Create iframe in your page width quiz url: //www.quizgnome.com/quiz-url?format=iframe
<iframe src="//www.quizgnome.com/quiz-url?format=iframe" frameBorder="0" style="width:100%" scrolling="no"></iframe>
Due to Cross Domain policy parent page cannot access iframe directly (and vice versa) so we have to use window.postMessage() to communicate.
In parent page add this script to listen to iframe message.
window.addEventListener("message", function(event) {
var origin = event.origin || event.originalEvent.origin; /* For Chrome, the origin property is in the event.originalEvent object. */
/* For security reason, confirm origin before execute */
if (origin === 'quiz-url') {
/* Data will come from event.data; */
handleQuizEvent(event.data);
}
}, false);
If using script tag, event will be send with same way (for simplicity) but no need to check for origin.
function handleQuizEvent(data) {
if (data.type === 'resize') {
/* Resize iframe element on parent page
jQuery */
$('<your-iframe-selector>').height(data.height);
/* Plain javascript */
document.getElementById('iframe-id').height = data.height;
}
}
function handleQuizEvent(data) {
if (data.type === 'load') {
/*Quiz have been load successfully*/
/*Access quiz data with data.quiz:*/
data.quiz.title; /*Quiz title*/
data.quiz.overview; /*Quiz overview*/
data.quiz.type; /*Quiz spectrum or multiple (choice)*/
data.quiz.questions; /*Quiz questions and answer*/
}
}
function handleQuizEvent(data) {
if (data.type === 'complete') {
/*Access result with data.result:*/
if (data.quiz.type === 'SpectrumQuiz') {
data.result.conclusion.title; /*Conclusion title*/
data.result.conclusion.description; /*Conclusion description*/
data.result.conclusion.image; /*Conclusion image*/
}
if (data.quiz.type === 'Questions') {
data.result.correct; /*Correct answer*/
data.result.answers; /*Answer list*/
}
if (data.quiz.type === 'CategoryQuiz') {
data.result.conclusion.title; /*Conclusion title*/
data.result.conclusion.description; /*Conclusion description*/
data.result.conclusion.image; /*Conclusion image*/
}
}
}
Specify absolute path to your css file via style parameter
//www.quizgnome.com/quiz-url?container=<your-div-id>&style=<css-path>