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. 


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.


  1. Add an iframe annotation. On the HTML tab, 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.


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

        <script type="text/javascript" src="//"></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";
                            } else {
                                if (key.indexOf("_pass")>-1) {
                                    questions["key-" + question_key] = variables[key];                        
                                    if (variables[key]==true) {
                    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,3) + "%";                
                            hapyak.context.env.set("score", score, false, "track");    

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.

Did this answer your question?