Moved random selection to client side. Server dumps all possibilities to client rather than a single random item.

static/quiz_item.coffee

@@ -0,0 +1,61 @@
+refreshQuestion = () ->
+  if(not sessionStorage.getItem('user_items'))
+    $.ajax
+      url: "/user_items",
+      dataType: 'json',
+      success: (e) ->
+        sessionStorage.setItem('user_items', JSON.stringify(e['item_list']))
+        refreshQuestion()
+  if(sessionStorage.getItem('user_items'))
+    items = JSON.parse(sessionStorage.getItem('user_items'))
+    selection = items[Math.floor(Math.random() * items.length)]
+    $("#help-area").text('');
+    $("#kana").removeClass("correct").val('');
+    $("#question-area").text('');
+    $("#question-image").attr("src", '');
+    $('#answer').addClass('hidden');
+    $('#answer').text(selection['answer']);
+    input_element = document.getElementById('kana');
+    if(selection['item_type']  == 'radical')
+      $("#kana").attr("placeholder", "Meaning")
+      document.body.style.backgroundColor = "deepskyblue";
+      wanakana.unbind(input_element);
+      if(selection['question'].indexOf('http') >= 0)
+        $("#question-image").attr("src", selection['question']);
+      else
+        $("#question-area").text(selection['question']);
+    else
+      $("#kana").attr("placeholder", "かな")
+      if(selection['item_type'] == 'kanji')
+        document.body.style.backgroundColor = "deeppink";
+      else
+        document.body.style.backgroundColor = "darkviolet";
+      wanakana.bind(input_element);
+      $("#question-area").text(selection['question']);
+
+$(document).keypress (e) ->
+    if(e.which == 13)
+      $("#submit-answer").click();
+
+$("#submit-answer").click (e) ->
+    e.preventDefault();
+    input_answer = document.getElementById('kana').value;
+    if($("#kana").hasClass("correct"))
+      refreshQuestion();
+    else if($('#answer').text().replace(/\s/g, '').split(/[,\.]/g).indexOf(input_answer) != -1)
+      $("#kana").addClass("correct").removeClass("wrong");
+    else
+      $("#kana").addClass("wrong").removeClass("correct").val('')
+
+$("#get-help").click (e) ->
+  e.preventDefault();
+  $("#answer").removeClass('hidden');
+
+$("#api-refresh").click (e) ->
+  e.preventDefault();
+  $.post("{{ url_for('refresh_api') }}");
+
+$ ->
+  $(document).ready ->
+    $('[data-toggle="tooltip"]').tooltip();
+    refreshQuestion();

static/style.css

@@ -38,3 +38,7 @@ body{
     font-size: 200%;
     color: white;
 }
+
+.hidden{
+    display: none;
+}

templates/quiz.html

@@ -18,7 +18,7 @@
         <nav class="navbar navbar-default">
             <div class="container-fluid">
                 <div class="navbar-header">
-                    <a class="navbar-brand">
+                    <a class="navbar-brand" href="{{ url_for('show_home') }}">
                         <img alt="Brand" height="24" width="24" src="{{ url_for('static', filename='burned.png')}}">
                     </a>
                 </div>
@@ -50,78 +50,15 @@
                 </div>
             </div>
             <div class="row">
-                <div id="help-area" class="col-md-12 text-center help-size">
+                <div id="answer" class="col-md-12 text-center help-size hidden">
                 </div>
             </div>
             <div class="row">
                 <div class="col-md-12 text-center">
-                    <button class="btn btn-default btn-lg" id="get-help">I Don't Know</button>
+                    <button class="btn btn-default btn-lg" id="get-help">Reveal Answer(s)</button>
                 </div>
             </div>
         </div>
     </body>
-    <script>
-        var input = document.getElementById('kana');
-        $(document).ready(function(){
-            $('[data-toggle="tooltip"]').tooltip();
-            refreshQuestion()
-        }).keypress(function(e){
-            if(e.which == 13){
-                $("#submit-answer").click()
-            }
-        })
-        function refreshQuestion(){
-            $.getJSON("/quiz_item", function(data){
-                $("#help-area").text('');
-                $("#kana").removeClass("correct").val('');
-                sessionStorage.setItem("question", data['question']);
-                sessionStorage.setItem("answer", data['answer']);
-                sessionStorage.setItem("item_type", data['item_type']);
-                $("#question-area").text('');
-                $("#question-image").attr("src", '');
-                if(sessionStorage.getItem('item_type') == 'radical'){
-                    $("#kana").attr("placeholder", "Meaning")
-                    document.body.style.backgroundColor = "deepskyblue";
-                    wanakana.unbind(input);
-                    if(sessionStorage.getItem('question').indexOf('http') >= 0){
-                        $("#question-image").attr("src", sessionStorage.getItem('question'));
-                    }
-                    else {
-                        $("#question-area").text(sessionStorage.getItem('question'));
-                    }
-                }
-                else{
-                    $("#kana").attr("placeholder", "かな")
-                    if(sessionStorage.getItem('item_type') == 'kanji'){
-                        document.body.style.backgroundColor = "deeppink";
-                    }
-                    else{
-                        document.body.style.backgroundColor = "darkviolet";
-                    }
-                    wanakana.bind(input);
-                    $("#question-area").text(sessionStorage.getItem('question'));
-                }
-        })}
-        $("#submit-answer").click(function (e){
-            e.preventDefault();
-            var input_answer = document.getElementById('kana').value;
-            if($("#kana").hasClass("correct")){
-                refreshQuestion();
-            }
-            else if(sessionStorage.getItem('answer').replace(/\s/g, '').split(/[,\.]/g).indexOf(input_answer) !== -1){
-                $("#kana").addClass("correct").removeClass("wrong");
-            }
-            else{
-                $("#kana").addClass("wrong").removeClass("correct").val('');
-            }
-        });
-        $("#get-help").click(function(e){
-            e.preventDefault();
-            $("#help-area").text(sessionStorage.getItem('answer'));
-        });
-        $("#api-refresh").click(function(e){
-            e.preventDefault();
-            $.post("{{ url_for('refresh_api') }}")
-        });
-    </script>
+    <script defer src="{{ url_for('static', filename='quiz_item.js')}}"></script>
 </html>

wanikaniburned.py

@@ -1,6 +1,6 @@
 import json
 import random
-from flask import Flask, render_template, redirect, url_for, jsonify, flash
+from flask import Flask, render_template, redirect, url_for, jsonify, flash, Response
 from flask.ext.login import LoginManager, login_user, login_required, current_user, logout_user, login_fresh
 from flask.ext.sqlalchemy import SQLAlchemy
 from flask.ext.wtf import Form
@@ -140,37 +140,27 @@ def show_quiz():
     return render_template("quiz.html")
 
 
-@app.route('/quiz_item')
+@app.route('/user_items')
 @login_required
-def get_quiz():
-    choices = []
-    if current_user.radicals:
-        choices.append('radical')
-    if current_user.kanji:
-        choices.append('kanji')
-    if current_user.vocabulary:
-        choices.append('vocabulary')
-    selected_type = random.choice(choices)
-    if selected_type is 'radical':
-        selected_item = random.choice(json.loads(current_user.radicals))
-        if selected_item['image']:
-            return jsonify(item_type='radical', question=selected_item['image'], answer=selected_item['meaning'])
+def get_items():
+    items = []
+    for item in json.loads(current_user.radicals):
+        if item['image']:
+            items.append({'item_type': 'radical', 'question': item['image'], 'answer': item['meaning']})
         else:
-            return jsonify(item_type='radical', question=selected_item['character'], answer=selected_item['meaning'])
-    elif selected_type is 'kanji':
-        selected_item = random.choice(json.loads(current_user.kanji))
+            items.append({'item_type': 'radical', 'question': item['character'], 'answer': item['meaning']})
+    for item in json.loads(current_user.kanji):
         made_answer = ""
-        if selected_item['onyomi'] and selected_item['kunyomi']:
-            made_answer = selected_item['onyomi'] + ',' + selected_item['kunyomi'].replace('.*', '')
-        elif selected_item['onyomi']:
-            made_answer = selected_item['onyomi']
-        elif selected_item['kunyomi']:
-            made_answer = selected_item['kunyomi'].replace('.*', '')
-        return jsonify(item_type='kanji', question=selected_item['character'],
-                       answer=made_answer)
-    else:
-        selected_item = random.choice(json.loads(current_user.vocabulary))
-        return jsonify(item_type='vocabulary', question=selected_item['character'], answer=selected_item['kana'])
+        if item['onyomi'] and item['kunyomi']:
+            made_answer = item['onyomi'] + ',' + item['kunyomi'].replace('.*', '')
+        elif item['onyomi']:
+            made_answer = item['onyomi']
+        elif item['kunyomi']:
+            made_answer = item['kunyomi'].replace('.*', '')
+        items.append({'item_type': 'kanji', 'question': item['character'], 'answer': made_answer})
+    for item in json.loads(current_user.vocabulary):
+        items.append({'item_type': 'vocabulary', 'question': item['character'], 'answer': item['kana']})
+    return jsonify(item_list=items)
 
 
 @app.route('/refresh', methods=['POST'])