Friendly warning: Welcome to developer territory.

You will have a lot of fun if you are comfortable with HTML, Javascript and CSS, or have a friend / colleague that is. If not, you may have a bad time.

If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and Javascript courses.

Overview

Here's a nifty way to create a "Score" or "Grade" annotation. It will automatically update as the viewer answers quiz questions throughout the video.

Here is an example. The instructions to create this annotation are below.

Instructions

  1. Add an iframe annotation. Delete the default code and paste in the code below.
  2. Add a text annotation that references the variable "score".
  3. Add quiz annotations as needed.
  4. Sit back and enjoy your new Score annotation.

Code

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            html, body { margin: 0; padding: 0 }        
        </style>
    </head>
    <body>
        <!-- HTML code goes here -->

        <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
        <script type="text/javascript">
            (function () {
                hapyak.context.addEventListener('data', function (variables) {
                   
                    var questions = [];
                    var numPass = 0;                    
                    var numQuestions = 0;                                        
                    for (var key in variables) {
                        if (key.indexOf("quiz_")==0) {
                           
                            var question_key = key.substr(6,key.indexOf("_",6)-6);
                            if (!questions["key-" + question_key]) {
                                questions["key-" + question_key] = "set";
                                numQuestions++;
                            } else {
                               
                                if (key.indexOf("_pass")>-1) {
                                    questions["key-" + question_key] = variables[key];                        
                                    if (variables[key]==true) {
                                        numPass++;
                                    }
                                }
             
                            }                            
                           
                        }
                    }
                   
                    if (numQuestions==0) {
                        hapyak.context.env.set("score", "", false, "track");    
                    } else {
                        if (numPass==0) {
                            hapyak.context.env.set("score", "0%", false, "track");                        
                        } else {
                            var score = String((numPass/numQuestions)*100).substr(0,2) + "%";                
                            hapyak.context.env.set("score", score, false, "track");    
                        }                        
                    }
                   
                });
            }());
        </script>
    </body>
</html>
Did this answer your question?