From 4a1716de732e5316916e1aade37d5261a0ebd1fc Mon Sep 17 00:00:00 2001
From: tkupek <mail@tkupek.eu>
Date: Tue, 9 Feb 2016 21:35:46 +0100
Subject: [PATCH] style answer after ajax response

---
 db.sqlite3                                    | Bin 70656 -> 70656 bytes
 .../elearning/static/css/style.css            |   8 +++
 .../elearning/static/js/elearning.js          |  50 +++++++++++++++++-
 .../elearning/templates/index.html            |   6 +--
 tkupek_elearning/elearning/views.py           |  30 ++++++-----
 tkupek_elearning/urls.py                      |   2 +-
 6 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/db.sqlite3 b/db.sqlite3
index 875621cdd91f436872397fb5b5244d730fdf4bf5..20ea58516864e20b63204d3869b8ae5bc9149869 100644
GIT binary patch
delta 244
zcmXYpyJ`Ya5Qb;wpR?!evLIFlOm8E^ZM@Vzh<Own`vg+ku5H{`@C5=}7zoIAZs8>m
z2_}V}U2Xo$@XbG6=yahkZBAbw$DF=D&m(r(B{H*EkrRHg!v=ZQ)D^m+GsN6fNs`!B
zu>~1ShLe#Cs@4$cTVp8nDOtX0&rcMDGrm!x@Dm?+vdYY&?&h#Jmmp9MSxiJkijwe;
w6Amc-(<eFx%<3wItyBU<$ai>4_`?tO*m`)4hZ?A1xx@9vWPG%7X1~sZE64UN5&!@I

delta 228
zcmZoz!P2mTWr8&0;)ycOjEgrW%;REY+5Df2wUvi~g@J+j3IuKzWI4{PslxyVig1=V
zoW;NcV{V$lVgS+qh#3rl`mZu;%R%MEpfn$ZW(QJSASTGdR}cu)aF<ybqEG;=46K3`
iq3|U$7y=dEVHSosLJ+Kw8%(lpX8gdxvzh(QPjdh~QYHBS

diff --git a/tkupek_elearning/elearning/static/css/style.css b/tkupek_elearning/elearning/static/css/style.css
index 63dd52f..2702043 100644
--- a/tkupek_elearning/elearning/static/css/style.css
+++ b/tkupek_elearning/elearning/static/css/style.css
@@ -33,3 +33,11 @@ p[id^="explanation_"] {
 .margin50 {
     margin-top: 50px;
 }
+
+.correct {
+    outline: 4px solid #00a353;
+}
+
+.failed {
+    outline: 4px solid #a60000;
+}
diff --git a/tkupek_elearning/elearning/static/js/elearning.js b/tkupek_elearning/elearning/static/js/elearning.js
index 3530718..6a2e8f0 100644
--- a/tkupek_elearning/elearning/static/js/elearning.js
+++ b/tkupek_elearning/elearning/static/js/elearning.js
@@ -8,22 +8,37 @@ function toggle_solution(id)
     }
 }
 
+function show_solution(id)
+{
+    element = document.getElementById("explanation_" + id);
+    if (element.className == "hide") {
+        element.className = "show";
+    }
+}
+
 function get_answer(id) {
 
+    showSolutionButton = document.getElementById("showSolution_" + id);
+    showSolutionButton.disabled = true;
+
+    show_solution(id);
+
     var answerRequest=new ajaxRequest()
     answerRequest.onreadystatechange=function(){
      if (answerRequest.readyState==4){
       if (answerRequest.status==200 || window.location.href.indexOf("http")==-1){
-       alert(answerRequest.responseText);
+       parseResponse(id, answerRequest.responseText);
       }
       else{
        alert("An error has occured making the request");
       }
      }
     }
+
     var questionId=encodeURIComponent(id)
     var token=encodeURIComponent("1ea6de64cf5a11e5ada41c6f6525891e")
     var answers=encodeURIComponent(getCheckboxAnswers(id))
+
     answerRequest.open("GET", "api?id="+questionId+"&token="+token+"&answers="+answers, true)
     answerRequest.send(null)
 }
@@ -46,8 +61,39 @@ function getCheckboxAnswers(id) {
     return answers;
 }
 
+function parseResponse(id, responseText) {
+
+    var correctOptions = responseText.split("_");
+
+    var elements = document.getElementsByName("checkbox_" + id);
+
+    for(var i = 0; i < elements.length; i++) {
+        var element = elements[i];
+        element.className="";
+
+        var correct = isCorrectOption(element.value);
+        if(correct) {
+            element.className="correct";
+        } else {
+            if(element.checked) {
+                element.className="failed";
+            }
+        }
+     }
+
+    function isCorrectOption(option) {
+        for(var i = 0; i < correctOptions.length; i++) {
+            if(correctOptions[i] == option) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+
+function ajaxRequest() {
 
-function ajaxRequest(){
  var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
  if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
   for (var i=0; i<activexmodes.length; i++){
diff --git a/tkupek_elearning/elearning/templates/index.html b/tkupek_elearning/elearning/templates/index.html
index 37467ce..7158005 100644
--- a/tkupek_elearning/elearning/templates/index.html
+++ b/tkupek_elearning/elearning/templates/index.html
@@ -17,7 +17,7 @@
     <h1>{{ settings.title }}</h1>
     <p>{{ settings.message }}</p>
     <hr/>
-    <div class="margin50" />
+    <div class="margin50" ></div>
 
     {% for question, options in questions_options.items %}
         <h2>{{ question.id }}: {{ question.title }}</h2>
@@ -31,14 +31,14 @@
                         {{ option.text }}
                     </label>
                 {% endfor %}
-                <button class="margin10" type="button" id="showSolution" onmousedown="get_answer({{ question.id }})" onmouseup="toggle_solution({{ question.id }})">{{ settings.button_solution }}</button>
+                <button class="margin10" type="button" id="showSolution_{{ question.id }}" onmousedown="get_answer({{ question.id }})">{{ settings.button_solution }}</button>
             </form>
 
         <p id="explanation_{{ question.id }}" class="hide">{{ question.explanation }}</p>
         <div class="margin25" />
     {% endfor %}
 
-    <div class="margin50" />
+    <div class="margin50" ></div>
     <hr/>
     {{ settings.footer }}
 
diff --git a/tkupek_elearning/elearning/views.py b/tkupek_elearning/elearning/views.py
index bec9e7b..9ef3d06 100644
--- a/tkupek_elearning/elearning/views.py
+++ b/tkupek_elearning/elearning/views.py
@@ -4,8 +4,7 @@ from django.shortcuts import render_to_response
 
 from tkupek_elearning.elearning.models import Setting, Question, Option, UserAnswer, User
 
-import pdb
-
+# import pdb
 
 def home(request):
     settings = Setting.objects.filter(active=1)
@@ -21,7 +20,7 @@ def home(request):
     return render_to_response('index.html', {'settings': settings, 'questions_options': questions_options})
 
 
-def getAnswer(request):
+def get_answer(request):
     if request.method == 'GET':
 
         request_id = request.GET.get('id')
@@ -32,17 +31,24 @@ def getAnswer(request):
         user = User.objects.get(token=request_token)
 
         try:
-            userAnswer = UserAnswer.objects.get(questionId=question.id, user=user.id)
+            user_answer = UserAnswer.objects.get(questionId=question.id, user=user.id)
         except ObjectDoesNotExist:
-            userAnswer = None
+            user_answer = None
 
-        if userAnswer is None:
-            userAnswer = UserAnswer()
-            userAnswer.questionId = question
-            userAnswer.user = user
-            userAnswer.answers = request_answers
-            userAnswer.save()
+        if user_answer is None:
+            user_answer = UserAnswer()
+            user_answer.questionId = question
+            user_answer.user = user
+            user_answer.answers = request_answers
+            user_answer.save()
 
         options = Option.objects.filter(question=question.id, correct=True)
 
-        return HttpResponse(options)
+        options_id = ""
+        for option in options:
+            options_id += str(option.id) + "_"
+
+        if options_id is not "":
+            options_id = options_id[:-1]
+
+        return HttpResponse(options_id)
diff --git a/tkupek_elearning/urls.py b/tkupek_elearning/urls.py
index 5fd377c..5be92b7 100644
--- a/tkupek_elearning/urls.py
+++ b/tkupek_elearning/urls.py
@@ -21,5 +21,5 @@ import tkupek_elearning.elearning.views
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'start', tkupek_elearning.elearning.views.home),
-    url(r'api', tkupek_elearning.elearning.views.getAnswer)
+    url(r'api', tkupek_elearning.elearning.views.get_answer)
 ]