merge

mmg/urls.py

@@ -7,5 +7,6 @@ from django.conf.urls import patterns, url
 urlpatterns = patterns(
     '',
     url(r'^$', 'mmg.views.home', name='home'),
-    url(r'^answer/$', 'mmg.views.answer', name='answer'),
+    url(r'^api/v0/attempt/$', 'mmg.views.attempt', name='attempt'),
+    url(r'^api/v0/problem/$', 'mmg.views.problem', name='problem'),
 )

mmg/views.py

@@ -1,6 +1,7 @@
+import json
 import random
 
-from django.http import HttpResponseRedirect
+from django.http import HttpResponseRedirect, HttpResponse
 from django.core.urlresolvers import reverse
 from django.shortcuts import render
 
@@ -9,7 +10,7 @@ from mmg.forms import NumberForm
 MAX = 12
 
 
-def home(request):
+def _generate_problem():
     operation = random.choice(['+', '-'])
     first = random.choice(range(MAX))
     if operation == '-':
@@ -19,23 +20,42 @@ def home(request):
             second = random.choice(range(first))
     else:
             second = random.choice(range(MAX))
-    form = NumberForm({
+    return {
         'first': first,
         'operation': operation,
         'second': second,
-    })
-    return render(
-        request,
-        'index.html',
-        {
-            'form': form,
-        }
-    )
+    }
 
 
-def answer(request):
-    form = NumberForm(request.POST or None)
-    print(form)
-    if form.is_valid():
-        print(form.cleaned_data)
-    return HttpResponseRedirect(reverse('mmg.views.home'))
+def _validate_solution(a):
+    print a
+    f = int(a['first'])
+    o = a['operation']
+    s = int(a['second'])
+    if a['answer'] == '':
+        g = 0
+    else:
+        g = int(a['answer'])
+    r = False
+    if o == '+':
+        r = bool(f + s == g)
+    else:
+        r = bool(f - s == g)
+    return r
+
+
+def home(request):
+    return render(request, 'index.html')
+
+
+def attempt(request):
+    d = request.POST.dict()
+    return HttpResponse(
+        json.dumps({'status': _validate_solution(d)}),
+        content_type="application/json")
+
+
+def problem(request):
+    return HttpResponse(
+        json.dumps(_generate_problem()),
+        content_type="application/json")

static/django-csrf.js

@@ -0,0 +1,44 @@
+// using jQuery
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie != '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = jQuery.trim(cookies[i]);
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+var csrftoken = getCookie('csrftoken');
+function csrfSafeMethod(method) {
+    // these HTTP methods do not require CSRF protection
+    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+}
+function sameOrigin(url) {
+    // test that a given url is a same-origin URL
+    // url could be relative or scheme relative or absolute
+    var host = document.location.host; // host + port
+    var protocol = document.location.protocol;
+    var sr_origin = '//' + host;
+    var origin = protocol + sr_origin;
+    // Allow absolute or scheme relative URLs to same origin
+    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
+        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
+        // or any other URL that isn't scheme relative or absolute i.e relative.
+        !(/^(\/\/|http:|https:).*/.test(url));
+}
+$.ajaxSetup({
+    beforeSend: function(xhr, settings) {
+        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
+            // Send the token to same-origin, relative URLs only.
+            // Send the token only if the method warrants CSRF protection
+            // Using the CSRFToken value acquired earlier
+            xhr.setRequestHeader("X-CSRFToken", csrftoken);
+        }
+    }
+});

static/math.css

@@ -16,3 +16,6 @@
     padding-top: 30px;
 }
 
+.wrong {
+    background: red;
+}

static/math.js

@@ -0,0 +1,36 @@
+function update_board(f, o, s) {
+    $("#first").text(f);
+    $("#operation").text(o);
+    $("#second").text(s);
+}
+
+function new_problem() {
+    $.get("/api/v0/problem/", function(d) {
+        update_board(d["first"], d["operation"], d["second"]);
+        $("#answer").val("");
+    })
+}
+
+function deal_with_answer(e) {
+    var data = {
+        "first": $("#first").text(),
+        "operation": $("#operation").text(),
+        "second": $("#second").text(),
+        "answer": $("#answer").val(),
+    };
+    console.log(data);
+    $.post("/api/v0/attempt/", data, function(d) {
+        if(d["status"]) {
+            $("#content").removeClass("wrong");
+            new_problem();
+        }
+        else {
+            $("#content").addClass("wrong");
+        }
+    });
+}
+
+$(function() {
+    new_problem();
+    $("#check").click(deal_with_answer);
+});

templates/index.html

@@ -7,21 +7,18 @@
     </head>
     <body>
         <section id="content">
-            <form method="post" action="{% url 'mmg.views.answer' %}">
-                {% csrf_token %}
-                <div class="number question">
-                    <span class="number" id="first">{{ form.first.value }}</span>
-                    <span class="number" id="operation">{{ form.operation.value }}</span>
-                    <span class="number" id="second">{{ form.second.value }}</span>
-                </div>
-                {{ form.first }}
-                {{ form.operation }}
-                {{ form.second }}
-                {{ form.answer }}
-                <input type="submit" name="check" value="check"/>
-            </form>
+            <div class="number question">
+                <span class="number" id="first">0</span>
+                <span class="number" id="operation">+</span>
+                <span class="number" id="second">0</span>
+            </div>
+            <div class="number answer">
+                <input id="answer" type="number" size="2" class="number"></div>
+                <input id="check" type="submit" name="check" value="check"/>
+            </div>
         </section>
         <script src="/static/jquery-2.0.0.min.js"></script>
+        <script src="/static/django-csrf.js"></script>
         <script src="/static/math.js"></script>
     </body>
 </html>