Implement the full quiz functionality without requiring any JavaScript to run.

README.md

@@ -19,36 +19,41 @@ The plugin is made for Wordpress, but the JavaScript component can easily be imp
 
 If you're using a different content management system, you can still use the JavaScript component to enable this functionality on your site.
 
-The component requires a `DIV` right before the container which holds your comment form. The `DIV` has two data-attributes: `data-nrkbetaquiz` and `data-nrkbetaquiz-error`. The `DIV` also needs the class `nrkbetaquiz`.
-
-`data-nrkbetaquiz-error` is a string with the error message in case the user has answered the quiz wrongfully.
-`data-nrkbetaquiz` is an array with the following structure:
-
-	[{
-	    text: 'Who is the current president of The Unites States?'
-	    answers: ['Barack Obama', 'Donald Trump', 'Steve Bannon'],
-	    correct: 1
-	  }, {
-	    text: 'What is the radius of Earth?'
-	    answers: ['6 371 kilometers', '371 kilometers', '200 kilometers'],
-	    correct: 0
-	}]
-
+The component requires a `DIV` to be inserted as a direct child of your comment form. The `DIV` has three `data-`attributes: `data-nrkbetaquiz`, `data-nrkbetaquiz-error`, and `data-nrkbetaquiz-correct`. The `DIV` also needs the class `nrkbetaquiz`.
+
+* `data-nrkbetaquiz-error` is a string with the error message in case the user has answered the quiz wrongfully.
+* `data-nrkbetaquiz-correct` is a string with the success message when the user answers the quiz correctly.
+* `data-nrkbetaquiz` is a [JSON](http://json.org/) array with the following structure:  
+
+  ```json
+  [{
+      "text": "Who is the current president of The Unites States?",
+      "answers": ["Barack Obama", "Donald Trump", "Steve Bannon"],
+      "correct": 1
+    }, {
+      "text": "What is the radius of Earth?",
+      "answers": ["6,371 kilometers", "371 kilometers", "200 kilometers"],
+      "correct": 0
+  }]
+  ```
 
 Here's a full example of the implementation:
 
-	<script src="nrkbetaquiz.js"></script>
-	<div class="nrkbetaquiz"
-	  data-nrkbetaquiz="[{
-	      text: 'Who is the current president of The Unites States?'
-	      answers: ['Barack Obama', 'Donald Trump', 'Steve Bannon'],
-	      correct: 1
-	    }, {
-	      text: 'What is the radius of Earth?'
-	      answers: ['6 371 kilometers', '371 kilometers', '200 kilometers'],
-	      correct: 0
-	  }]"
-	  data-nrkbetaquiz-error="You fail">
-	</div>
-
-	<div id="YOUR_COMMENT_FORM_CONTAINER"></div>
+```html
+<form id="YOUR_COMMENT_FORM_CONTAINER">
+    <script src="nrkbetaquiz.js"></script>
+    <div class="nrkbetaquiz"
+        data-nrkbetaquiz='[{
+                "text": "Who is the current president of The Unites States?",
+                "answers": ["Barack Obama", "Donald Trump", "Steve Bannon"],
+                "correct": 1
+            }, {
+                "text": "What is the radius of Earth?",
+                "answers": ["6,371 kilometers", "371 kilometers", "200 kilometers"],
+                "correct": 0
+            }]'
+        data-nrkbetaquiz-error="You fail"
+        data-nrkbetaquiz-correct="You succeed"
+    ></div>
+</form>
+```

nrkbetaquiz.css

@@ -1,27 +1,27 @@
-.nrkbetaquiz,
-.nrkbetaquiz + * {
-  overflow: hidden;
-  transition: .5s;
-  height: 0;
-}
-.nrkbetaquiz { height: auto }
-.nrkbetaquiz label {
-  cursor: pointer;
-  display: inline-block;
-  margin: 0 7px 6px 0;
-  border-radius: 5px;
-  padding: 10px 15px;
-  background: #eee;
-  transition: .2s;
+.nrkbetaquiz label.answer {
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 7px 6px 0;
+    border-radius: 5px;
+    padding: 10px 15px;
+    background: #eee;
 }
 .nrkbetaquiz label:hover {
-  background: #ccc;
+    background: #ccc;
+}
+.nrkbetaquiz p.correct,
+.nrkbetaquiz p.error {
+    font: inherit;
+    animation: .5s nrkbetaquiz;
+}
+.nrkbetaquiz p.correct {
+    color: green;
+    font-weight: bold;
+}
+.nrkbetaquiz p.error {
+    color: red;
 }
-.nrkbetaquiz h3 {
-  color: red;
-  font: inherit;
-  animation: nrkbetaquiz forward;
+@keyframes nrkbetaquiz {
+    from { transform: scale(0); }
+    to { transform: scale(1); }
 }
-@keyframes nrkbetaquiz{
-  from{transform:scale(0)}
-}

nrkbetaquiz.js

@@ -6,18 +6,9 @@ document.addEventListener('DOMContentLoaded', function(){
     catch(err){return []}
   };
 
-  var removeQuiz = function(quizNode, formNode){
-    quizNode.style.height = quizNode.offsetHeight + 'px';
-    formNode.style.height = formNode.scrollHeight + 'px';
-    quizNode.style.height = '0px';
-    setTimeout(function(){
-      quizNode.style.display = 'none';
-      formNode.style.height = 'auto';
-    }, 500);
-  };
-
   var buildAnswer = function(text, name, value){
     var label = document.createElement('label');
+    label.className = 'answer';
     var input = label.appendChild(document.createElement('input'));
     var title = label.appendChild(document.createTextNode(text));
 
@@ -28,11 +19,15 @@ document.addEventListener('DOMContentLoaded', function(){
   };
 
   var buildQuiz = function(quizNode){
-    var formNode = quizNode.nextElementSibling;
+    var formNode = quizNode.parentNode;
     var errorText = quizNode.getAttribute('data-' + NRKBCQ + '-error');
+    var correctText = quizNode.getAttribute('data-' + NRKBCQ + '-correct');
     var questions = parseQuiz(quizNode.getAttribute('data-' + NRKBCQ));
     var correctId = NRKBCQ + location.pathname + questions.map(function(q){return q.correct}).join('');
-    var errorNode = document.createElement('h3').appendChild(document.createTextNode(errorText)).parentNode;
+    var errorNode = document.createElement('p').appendChild(document.createTextNode(errorText)).parentNode;
+    errorNode.className = 'error';
+    var correctNode = document.createElement('p').appendChild(document.createTextNode(correctText)).parentNode;
+    correctNode.className = 'correct';
     var container = document.createElement('div');
 
     if(localStorage.getItem(correctId) === correctId){  //Skip quiz if already solved
@@ -47,20 +42,35 @@ document.addEventListener('DOMContentLoaded', function(){
         .forEach(function(node){node && container.appendChild(node)});
     });
 
+    // Disable form textareas until quiz is answered correctly.
+    var el;
+    formNode.querySelectorAll( 'textarea' ).forEach( function (el) {
+      el.setAttribute( 'disabled', 'disabled' );
+    });
+
     quizNode.appendChild(container);
     quizNode.addEventListener('change', function(){
       var checked = questions.map(function(q,i){return container.querySelector('input[name="' + NRKBCQ + i + '"]:checked')});
       var correct = questions.every(function(q,i){return checked[i] && Number(checked[i].value) === Number(q.correct)});
       var failure = !correct && checked.filter(Boolean).length === questions.length;
 
-      if(correct){
-        localStorage.setItem(correctId, correctId);
-        removeQuiz(quizNode, formNode);
-      }else if(failure){
-        container.appendChild(errorNode);
+      if ( correct ) {
+        if ( el = quizNode.querySelector('.error') ) {
+            el.parentNode.removeChild( el );
+        }
+        localStorage.setItem( correctId, correctId );
+        container.appendChild( correctNode );
+        formNode.querySelectorAll( 'textarea' ).forEach( function (el) {
+          el.removeAttribute( 'disabled' );
+        });
+      } else if ( failure ) {
+        if ( el = quizNode.querySelector('.correct') ) {
+            el.parentNode.removeChild( el );
+        }
+        container.appendChild( errorNode );
       }
     });
   };
 
   [].forEach.call(document.querySelectorAll('.' + NRKBCQ), buildQuiz);
-});
+});