social + indicators

Author: bsouthga

README.md

@@ -13,6 +13,9 @@ First, create a quiz text file using the following format (named `unicorns.quiz`
 // @bsouthga
 // <- (this is a comment and will be ignored)
 
+// this is the url for the parent
+url: http://urbaninstitute.github.io/quick-quiz/
+
 // this is the title of the quiz
 # How well do you know real creatures?
 
@@ -75,7 +78,8 @@ This produces a formatted json file like this...
     },
     {
       "answers": [
-        "True"
+        "True",
+        "False"
       ],
       "correct": {
         "index": 0
@@ -97,7 +101,8 @@ This produces a formatted json file like this...
       "prompt": "What shade of white is this unicorn?"
     }
   ],
-  "title": "How well do you know real creatures?"
+  "title": "How well do you know real creatures?",
+  "url": "http://urbaninstitute.github.io/quick-quiz/"
 }
 ```
 

index.html

@@ -29,4 +29,4 @@
     });
   </script>
 </body>
-</html>
+</html>

quiz.css

@@ -38,10 +38,18 @@ html, body {
   width: 100%;
 }
 
-.question-image img {
+.question-image img,
+.results-ratio,
+.results-social,
+.quiz-title
+{
   max-width: 600px;
   display: block;
   margin: 0 auto;
+  text-align: center;
+}
+
+.question-image img {
   margin-top: 20px;
 }
 
@@ -51,21 +59,48 @@ html, body {
 }
 
 .quiz-title {
-  display: block;
-  max-width: 600px;
   font-size: 60px;
   font-weight: 300;
-  text-align: center;
-  margin: 0 auto;
   margin-top: 100px;
   margin-bottom: 30px;
 }
 
 .results-ratio {
-  display: block;
-  max-width: 600px;
   margin: 20px auto;
   font-size: 24px;
   font-weight: bold;
-  text-align: center;
+}
+
+.results-social {
+  margin-top: 30px;
+}
+
+.results-social a:not(:first-child) {
+  margin-left: 20px;
+}
+
+.progress-circles {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  left: 40px;
+  top: 40px;
+  display: none;
+}
+
+.progress-circles.show {
+  display: block;
+}
+
+.progress-circles li{
+  list-style: none;
+  display: inline-block;
+  background: #ccc;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+.progress-circles li.dark{
+  background: #6b6b6b;
 }

quiz.js

@@ -22,10 +22,10 @@ $.fn.quiz = function(filename) {
 
 // create html structure for quiz
 // using loaded questions json
-function render(opts) {
+function render(quiz_opts) {
 
   // list of questions to insert into quiz
-  var questions = opts.questions;
+  var questions = quiz_opts.questions;
 
   // keep track of the state of correct
   // answers to the quiz so far
@@ -45,12 +45,28 @@ function render(opts) {
 
   var height = $quiz.height();
 
+
+  /*
+    Add carousel indicators
+  */
+  var $indicators = $('<ol>')
+    .attr('class', 'progress-circles')
+    .appendTo($quiz);
+
+  $.each(questions, function(question_index, question) {
+    $('<li>')
+      .attr('class', question_index ? "" : "dark")
+      .appendTo($indicators);
+  });
+
+  /*
+    Slides container div
+  */
   var $slides = $("<div>")
     .attr("class", "carousel-inner")
     .attr("role", "listbox")
     .appendTo($quiz);
 
-
   /*
     Create title slide
   */
@@ -60,7 +76,7 @@ function render(opts) {
     .appendTo($slides);
 
   $('<h1>')
-    .text(opts.title)
+    .text(quiz_opts.title)
     .attr('class', 'quiz-title')
     .appendTo($title_slide);
 
@@ -73,6 +89,7 @@ function render(opts) {
     .text("Take the quiz!")
     .click(function() {
       $quiz.carousel('next');
+      $indicators.addClass('show');
     })
     .appendTo($start_button);
 
@@ -172,6 +189,9 @@ function render(opts) {
           // keep track in total
           correct && state.correct++;
           $quiz.carousel('next');
+
+
+
           // if we've reached the final question
           // set the results text
           if (last_question) {
@@ -181,6 +201,20 @@ function render(opts) {
               Math.round(100*(state.correct/state.total)) +
               "% of the questions correct!"
             );
+            $twitter_link.attr('href', tweet(state, quiz_opts));
+            $facebook_link.attr('href', facebook(state, quiz_opts));
+            $indicators.removeClass('show');
+            // indicate the question number
+            $indicators.find('li')
+              .removeClass('dark')
+              .eq(0)
+              .addClass('dark');
+          } else {
+            // indicate the question number
+            $indicators.find('li')
+              .removeClass('dark')
+              .eq(question_index+1)
+              .addClass('dark');
           }
         });
       });
@@ -208,6 +242,18 @@ function render(opts) {
     .attr("class", "quiz-answers")
     .appendTo($results_slide);
 
+  var $social = $("<div>")
+    .attr('class', 'results-social')
+    .appendTo($results_slide);
+
+  var $twitter_link = $('<a>')
+    .html('<span class="social social-twitter">tweet</span>')
+    .appendTo($social);
+
+  var $facebook_link = $('<a>')
+    .html('<span class="social social-facebook">share</span>')
+    .appendTo($social);
+
   $("<button>")
     .attr('class', 'quiz-button btn')
     .text("Try again?")
@@ -258,4 +304,26 @@ function resultsText(state) {
 }
 
 
-})(jQuery);
+function tweet(state, opts) {
+
+  var body = (
+    "I got " + state.correct +
+    " out of " + state.total +
+    " on @urbaninstitute's \"" + opts.title +
+    "\" quiz. Test your knowledge here: " + opts.url
+  );
+
+  return (
+    "http://twitter.com/intent/tweet?text=" +
+    encodeURIComponent(body)
+  );
+
+}
+
+function facebook(state, opts) {
+  return "https://www.facebook.com/sharer/sharer.php?u=" + opts.url;
+}
+
+
+})(jQuery);
+

quiz_questions.py

@@ -4,11 +4,6 @@
 import sys
 import json
 
-#
-# get title of quiz
-#
-title_rx = re.compile(r'\s+^#(.+)', re.M)
-
 
 #
 # find all questions and metadata
@@ -42,23 +37,30 @@
 """, re.X | re.M)
 
 
-
 def toJson(filename):
   with open(filename, 'r') as quiz_file:
-    # remove comments from quiz file
-    quiz_text = re.sub(r'//(.+)', "", quiz_file.read())
+    quiz_text = quiz_file.read()
+
+  # find the parent url before comments are removed
+  url = re.search(r'^url:(.+)', quiz_text, re.M)
+  if url:
+    url = url.group(1).strip()
 
   # find title for quiz
-  title = title_rx.match(quiz_text)
+  title = re.search(r'^#(.+)', quiz_text, re.M)
   if title:
     title = title.group(1).strip()
 
+  # remove comments from quiz file
+  quiz_text = re.sub(r'//(.+)', "", quiz_text)
+
   # find all questions
   questions = [m.groupdict() for m in q_rx.finditer(quiz_text)]
 
   results = []
 
   for q in questions:
+
     out = {}
 
     out['prompt'] = q['prompt'].strip()
@@ -87,7 +89,8 @@ def toJson(filename):
     json.dump(
       {
         "questions" : sorted(results, key=lambda x: x['number']),
-        "title" : title or ""
+        "title" : title,
+        "url" : url
       },
       outfile,
       sort_keys=True,
@@ -100,7 +103,6 @@ def toJson(filename):
 if __name__ == '__main__':
   if len(sys.argv) == 1:
     print("no quiz file given to script...")
-    toJson("unicorns.quiz")
   else:
     quiz_file = sys.argv[1]
     print("generating {}.json".format(quiz_file.split('.')[0]))

unicorns.json

@@ -39,5 +39,6 @@
       "prompt": "What shade of white is this unicorn?"
     }
   ],
-  "title": "How well do you know real creatures?"
+  "title": "How well do you know real creatures?",
+  "url": "http://urbaninstitute.github.io/quick-quiz/"
 }

unicorns.quiz

@@ -2,6 +2,9 @@
 // @bsouthga
 // <- (this is a comment and will be ignored)
 
+// this is the url for the parent
+url: http://urbaninstitute.github.io/quick-quiz/
+
 // this is the title of the quiz
 # How well do you know real creatures?