style answer after ajax response

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;
+}

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++){

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 }}
 

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:
+        if user_answer is None:
-            userAnswer = UserAnswer()
+            user_answer = UserAnswer()
-            userAnswer.questionId = question
+            user_answer.questionId = question
-            userAnswer.user = user
+            user_answer.user = user
-            userAnswer.answers = request_answers
+            user_answer.answers = request_answers
-            userAnswer.save()
+            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)

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)
 ]