thiagogomesverissimo
/
iassign
forknuté z LInE/iassign


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
							<!DOCTYPE html>  
<html>
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title> iFractions </title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css"  href="css/jquery-ui.css">
        <script type="text/javascript" src="js/phaser.min.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/boot.js"></script>
        <script type="text/javascript" src="js/menu.js"></script>
        <script type="text/javascript" src="js/circleOne.js"></script>
        <script type="text/javascript" src="js/squareOne.js"></script>
        <script type="text/javascript" src="js/squareTwo.js"></script>

        <script>
            function getParameterByName(name) {
                var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
                return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
            }
            function getAnswer() {
                console.log("getAnswer:: called");
                if (modulo < 1) {
                    alert(words.error_module);
                    return x;
                }
                if (difficulty < 1) {
                    alert(words.error_difficulty);
                    return x;
                }
                if (num < 5) {
                    return '{'
                            + '"shape": "' + (modules_names[modulo].split(",")[0] === words.square_name ? "Square" : "Circle")
                            + '", "modo": "' + modos[modulo]
                            + '", "label": "' + labels[modulo]
                            + '", "operator": "' + (operation == 1 ? "Plus" : (operation == 2 ? "Minus" : (operation == 3 ? "Mixed" : "Equals")))
                            + '", "difficulty": "' + difficulty
                            + '", "num": "' + num
                            + '"}';
                } else {
                    return '{'
                            + '"shape": "' + (modules_names[modulo].split(",")[0] === words.square_name ? "Square" : "Circle")
                            + '", "modo": "' + (operation == 1 ? "A" : (operation == 2 ? "B" : "C"))
                            + '", "label": "' + labels[modulo]
                            + '", "operator": "' + (operation == 1 ? "Plus" : (operation == 2 ? "Minus" : (operation == 3 ? "Mixed" : "Equals")))
                            + '", "difficulty": "' + difficulty
                            + '", "num": "' + num
                            + '"}';
                }
            }
            function getEvaluation() {
                console.log("getEvaluation:: called");
                //return false;
                //return angular.element("#commCtrl").scope().getEvaluation();
            }
            function getEvaluationCallback(nota) {
                console.log("getEvaluationCallback:: called");
                return false;
                //parent.getEvaluationCallback(nota);
            }
            var iLMparameters = {
                iLM_PARAM_ServerToGetAnswerURL: getParameterByName("iLM_PARAM_ServerToGetAnswerURL"),
                iLM_PARAM_SendAnswer: getParameterByName("iLM_PARAM_SendAnswer"),
                iLM_PARAM_AssignmentURL: getParameterByName("iLM_PARAM_AssignmentURL"),
                iLM_PARAM_Assignment: getParameterByName("iLM_PARAM_Assignment"),
                lang: getParameterByName("lang")
            };
            function trackAction(action) {
                $.post(iLMparameters.iLM_PARAM_ServerToGetAnswerURL + "&track=1", {trackingData: "html=1;" + action}, function (d) {});
            }
        </script>
        <style>
            .input-hidden {
                position: absolute;
                left: -9999px;
            }

            input[type=radio]:checked + label>img {
                border: 1px solid #fff;
                box-shadow: 0 0 3px 3px #090;
                filter: grayscale(0%);
            }

            input[type=radio] + label>img {
                width: 80px;
                height: 80px;
                margin-left: 5px;
                filter: grayscale(100%);
                transition: 500ms all;
            }
            #form-create img:hover {
                filter: grayscale(0%);
            }
            #select_module, #select_difficulty, #options_summary_title {
                text-align: left;
                padding: 15px;
            }
            #options_module, #options_diff {
                text-align: left;
                padding-left: 40px;
            }
            .img_difficulty {
                width: 80px !important;
                margin-right: 20px;
                margin-top: 20px;
            }
            #results-title {
                font-size: 140%;
                border-bottom: 2px solid #c9d1dd;
                padding-bottom: 5px;
            }
            #results-image, #results-info {
                float: left;
                margin-top: 10px;
            }
            #results-image img {
                width: 80px;
                height: 80px;
            }
            #results-info {
                margin-left: 15px;
                margin-top: 20px;
                font-size: 120%;
            }
            #bl {
                width: 100%; 
                height: 105px;
                border-bottom: 2px solid #c9d1dd;
            }
            .results-levels {
                border-bottom: 2px solid #c9d1dd;
                padding: 10px;
            }
            .results-levels img {
                width: 60px;
            }
            .numphase {
                float: left;
                margin-top: -50px;
                margin-left: 25px;
                position: absolute;
                z-index: 9999;
                color: white;
                font-size: 20px;
                font-weight: bold;
            }
            .results-levels-item, .results-levels {

            }
            .results-levels-item {
                margin-top: -70px;
                margin-left: 75px;
            }

        </style>
    </head>

    <body>

        <div class="container">
            <div class="clearfix"></div>
            <div class="panel panel-primary">
                <div class="panel-heading">FRACTIONS GAME</div>
                <div class="panel-body">
                    <center>
                        <div id="fractions-game" style="padding: 0 auto 0 auto;">
                            <div id="form-create" style="display: none;">
                                <script>
                                    // 
                                    var words = [];
                                    var modules_names = [''];
                                    var total_levels = [0, 2, 2, 3, 3, 3, 2, 2, 3, 3];
                                    var levels = [0, 3, 3, 5, 5, 5, 3, 3, 5, 5];
                                    var modos = ['', 'A', 'A', 'A', 'A', 'C', 'B', 'B', 'B', 'B'];
                                    var labels = [false, true, false, true, false, false, true, false, true, false];
                                    var operation_img = [''];
                                    var operation;
                                    var difficulty = 0;
                                    var modulo = 0;
                                    var num;
                                    var redir = true;

                                    var url_lang;
                                    if (iLMparameters.lang == "en")
                                        url_lang = "en_US";
                                    if (iLMparameters.lang == "pt")
                                        url_lang = "pt_BR";
                                    if (iLMparameters.lang == "fr")
                                        url_lang = "fr_FR";
                                    if (iLMparameters.lang == "es")
                                        url_lang = "es_PE";

                                    $.getJSON("resource/lang/" + url_lang + ".json", function (data) {
                                        $.each(data, function (key, val) {
                                            words[key] = val;
                                        });
                                        $("#select_module").html(words.select_module + ":");
                                        $("#select_difficulty").html(words.select_operation + ":");
                                        $("#options_summary_title").html(words.options_summary + ":");
                                        $("#options_module").html(words.options_module + ":");
                                        $("#options_diff").html(words.options_difficulty + ":");

                                        modules_names[1] = words.square_name + ", " + words.mode_name + " A, " + words.with_name + " " + words.label_name;
                                        modules_names[2] = words.square_name + ", " + words.mode_name + " A, " + words.without_name + " " + words.label_name;
                                        modules_names[3] = words.circle_name + ", " + words.mode_name + " A, " + words.with_name + " " + words.label_name;
                                        modules_names[4] = words.circle_name + ", " + words.mode_name + " A, " + words.without_name + " " + words.label_name;
                                        modules_names[5] = words.square_name + ", " + words.mode_name + " C, " + words.without_name + " " + words.label_name;
                                        modules_names[6] = words.square_name + ", " + words.mode_name + " B, " + words.with_name + " " + words.label_name;
                                        modules_names[7] = words.square_name + ", " + words.mode_name + " B, " + words.without_name + " " + words.label_name;
                                        modules_names[8] = words.circle_name + ", " + words.mode_name + " B, " + words.with_name + " " + words.label_name;
                                        modules_names[9] = words.circle_name + ", " + words.mode_name + " B, " + words.without_name + " " + words.label_name;

                                        for (i = 1; i < modules_names.length; i++) {
                                            $("#img_" + i).attr("title", modules_names[i]);
                                        }

                                        operation_img[1] = "help/arrow.png,help/arrow_2.png";
                                        operation_img[2] = "help/arrow.png,help/arrow_2.png";
                                        operation_img[3] = "help/arrow.png,help/arrow_2.png,help/double.png";
                                        operation_img[4] = "help/arrow.png,help/arrow_2.png,help/double.png";
                                        operation_img[5] = ",operator/equal.png,";
                                        operation_img[6] = "help/arrow.png,help/arrow_2.png";
                                        operation_img[7] = "help/arrow.png,help/arrow_2.png";
                                        operation_img[8] = "help/arrow.png,help/arrow_2.png,help/double.png";
                                        operation_img[9] = "help/arrow.png,help/arrow_2.png,help/double.png";

                                    });

                                    $(function () {
                                        $(document).tooltip();
                                    });

                                    function show_operation_and_difficulty(opt) {

                                        difficulty = 0;
                                        $("#div_difficulty").css("display", "block");
                                        $("#div_summary").css("display", "none");
                                        $("#options_module").html(words.options_module + ":");
                                        $("#options_diff").html(words.options_difficulty + ":");

                                        modulo = parseInt(opt.value);
                                        num = (modulo == 1 ? 1 : (modulo == 2 ? 2 : (modulo == 3 ? 1 : (modulo == 4 ? 2 : (modulo == 5 ? 5 : (modulo == 6 ? 3 : (modulo == 7 ? 4 : (modulo == 8 ? 3 : 4))))))));
                                        var i;
                                        var divs = "";
                                        var id = 1;
                                        for (i = 0; i < total_levels[modulo]; i++) {
                                            var j;
                                            divs += "<div style='margin-bottom: 20px;'>";
                                            if (operation_img[modulo].split(",")[i] !== '') {
                                                divs += "<img class='img_difficulty' src='resource/img/global/" + operation_img[modulo].split(",")[i] + "'>";
                                            } else {
                                                divs += "<div class='img_difficulty' style='display:inline;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>";
                                            }

                                            for (j = 0; j < levels[modulo]; j++) {
                                                divs += "<input type='radio' name='difficulty' id='diff_" + id + "' class='input-hidden' value='" + i + "," + j + "' onchange='change_operation_and_difficulty(" + (i + 1) + "," + (j + 1) + ")' /> <label for='diff_" + id + "'> <img src='resource/img/global/dot.png' style='height: " + ((j + 1) * 20) + "px; width: 30px; margin-bottom: -" + (((levels[modulo] + 1) * 20) - ((j + 1) * 20)) + "px;' /> </label>";
                                                id++;
                                            }
                                            divs += "</div>";
                                        }
                                        $("#options_difficulty").html(divs);
                                        $("#options_module").html(words.options_module + ": " + modules_names[modulo]);
                                    }

                                    function change_operation_and_difficulty(op, dif) {
                                        $("#div_summary").css("display", "block");
                                        operation = parseInt(op);
                                        difficulty = parseInt(dif);
                                        var op_text = "";
                                        switch (operation) {
                                            case 1:
                                                op_text = words.options_plus;
                                                break;
                                            case 2:
                                                op_text = words.options_minus;
                                                break;
                                            case 3:
                                                op_text = words.options_mixed;
                                                break;
                                            case 4:
                                                op_text = words.options_equals;
                                                break;
                                        }
                                        $("#options_diff").html(words.options_difficulty + ": " + op_text + ", " + difficulty);
                                    }

                                </script>

                                <div id="select_module"></div>

                                <input 
                                    type="radio" name="emotion"
                                    id="in1" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="1" />
                                <label for="in1">
                                    <img id="img_1" src="resource/img/global/game/one-s.png" title=""  />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in2" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="2" />
                                <label for="in2">
                                    <img id="img_2" src="resource/img/global/game/two-s.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in3" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="3" />
                                <label for="in3">
                                    <img id="img_3" src="resource/img/global/game/one-c.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in4" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="4" />
                                <label for="in4">
                                    <img id="img_4" src="resource/img/global/game/two-c.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in5" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="5" />
                                <label for="in5">
                                    <img id="img_5" src="resource/img/global/game/five-s.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in6" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="6" />
                                <label for="in6">
                                    <img id="img_6" src="resource/img/global/game/three-s.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in7" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="7" />
                                <label for="in7">
                                    <img id="img_7" src="resource/img/global/game/four-s.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in8" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="8" />
                                <label for="in8">
                                    <img id="img_8" src="resource/img/global/game/three-c.png" title="" />
                                </label>

                                <input 
                                    type="radio" name="emotion"
                                    id="in9" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="9" />
                                <label for="in9">
                                    <img id="img_9" src="resource/img/global/game/four-c.png" title="" />
                                </label>

                                <div id="div_difficulty" style="display:none;">
                                    <div id="select_difficulty"></div>
                                    <div id="options_difficulty"></div>
                                </div>

                                <div id="div_summary" style="display:none;">
                                    <div id="options_summary_title"></div>
                                    <div id="options_summary_text">
                                        <div id="options_module"></div>
                                        <div id="options_diff"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </center>

                    <div id="results" style="display: none;">
                        <div id="results-title"></div>
                        <div id="bl">
                            <div id="results-image"></div>
                            <div id="results-info"></div>
                        </div>
                        <div id="results-details"></div>
                    </div>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">COOPERATION TEAM</div>
                <div class="panel-body">
                    <center>
                        <ul>
                            <li><strong>BRAZIL:</strong> Le&ocirc;nidas de Oliveira Brand&atilde;o (IME-USP)</li>
                            <li><strong>PERU:</strong> Manuel Ibarra and Cristhian Serrano (EAPIIS-UNAMBA)</li>
                            <li><strong>FRANCE:</strong> Jean-Marc (MOCAH-UPMC)</li>
                        </ul>
                    </center>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">BASED ON</div>
                <div class="panel-body">
                    <center>
                        <ul>
                            <li><strong>iLM </strong>(interactive Learning Modules) </li>
                            <li><strong>Six facets of Serious Game Design</strong>:<br>
                                Pedagogical Objectives; Domain Simulation; Interactions with the Simulation; Problems and Progression; Decorum and Conditions of Use.
                            </li>
                        </ul>
                    </center>
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">TECHNOLOGY</div>
                <div class="panel-body">
                    <center>
                        <ul>
                            <li> We used <strong>HTML5</strong>, <strong>CSS</strong> and the <strong>Javascript</strong> Library <a href="http://phaser.io/" target="_blank"><strong>Phaser.io</strong></a> </li>
                        </ul>
                    </center>
                </div>
            </div>
        </div>

    </body>


    <script type="text/javascript">
        // If SendAnswer (student) ::Igor
        if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
            // Initialize the game
            var game = new Phaser.Game(900, 600, Phaser.CANVAS, 'fractions-game');
            hip = "143.107.45.11"; //Host ip
            name = ""; //player name
            lang = ""; //language
            var timer, totalTime;
            // Game One 
            onePosition = 0; //Map position
            oneMove = false; //Move to next position
            oneDifficulty = 0; //From one to five 
            oneOperator = ""; //Plus; Minus; Mixed
            oneLabel = false; //Show block label
            oneShape = ""; //Circle; square
            oneType = ""; // A - Place distance; B - Select blocks
            oneMenu = true;
            // Game Two
            twoPosition = 0; //Map position
            twoMove = false; //Move to next position
            twoDifficulty = 0; //From one to five 
            twoOperator = ""; //Plus; Minus; Mixed
            twoLabel = false; //Show block label
            twoShape = ""; //Circle; square
            twoType = ""; // A - Normal position; B - Random position
            twoMenu = true;
            //adding game states (scenes)
            game.state.add('boot', bootState);
            game.state.add('load', loadState);
            game.state.add('name', nameState);
            game.state.add('menu', menuState);
            game.state.add('menuCOne', menuCircleOne);
            game.state.add('mapCOne', mapCircleOne);
            game.state.add('gameCOne', gameCircleOne);
            game.state.add('endCOne', endCircleOne);
            game.state.add('menuSOne', menuSquareOne);
            game.state.add('mapSOne', mapSquareOne);
            game.state.add('gameSOne', gameSquareOne);
            game.state.add('endSOne', endSquareOne);
            game.state.add('menuSTwo', menuSquareTwo);
            game.state.add('mapSTwo', mapSquareTwo);
            game.state.add('gameSTwo', gameSquareTwo);
            game.state.add('endSTwo', endSquareTwo);

            lang = url_lang;

            var jogo = [];
            $.get(iLMparameters.iLM_PARAM_Assignment, function (d) {
                if (d != null) {
                    $.each(d, function (key, val) {
                        jogo[key] = val;
                    });
                    register_start();
                    if (jogo.hasOwnProperty('results')) {
                        $("#fractions-game").css("display", "none");
                        $("#results").css("display", "block");

                        var results = [];
                        $.each(jogo.results, function (key, val) {
                            results[key] = val;
                        });

                        $("#results-title").html(words.results_title);
                        $("#results-info").html(words.results_operation + ": " + jogo.operator + "<br>" + words.results_difficulty + ": " + jogo.difficulty);

                        var dd = "";
                        for (i = 1; i < results.length; i++) {
                            dd += "<div class='results-levels'> <img src='resource/img/en_US/sign.png'><div class='numphase'>" + i + "</div> ";

                            dd += "<div class='results-levels-item'>" + words.results_start + ": " + timeConverter(results[i].start);
                            dd += " " + words.results_end + ": " + timeConverter(results[i].end);
                            var temp = results[i].end - results[i].start;
                            dd += "<br>" + words.results_time + ": " + ("" + temp + "").toHHMMSS();
                            dd += "<br>" + words.results_hits + ": " + results[i].hits;
                            dd += "<br>" + words.results_errors + ": " + results[i].errors;
                            //dd += "<br>" + words.results_grade + ": ";
                            dd += "</div></div>";
                        }
                        $("#results-details").html(dd);
                        var icone = "";
                        if (jogo.shape == "Square") {
                            if (jogo.modo == "A") {
                                if (jogo.label == true) {
                                    icone = "one-s.png";
                                } else {
                                    icone = "two-s.png";
                                }
                            }
                            if (jogo.modo == "B") {
                                if (jogo.label == true) {
                                    icone = "three-s.png";
                                } else {
                                    icone = "four-s.png";
                                }
                            }
                            if (jogo.modo == "C") {
                                icone = "five-s.png";
                            }
                        } else {
                            if (jogo.modo == "A") {
                                if (jogo.label == true) {
                                    icone = "one-c.png";
                                } else {
                                    icone = "two-c.png";
                                }
                            }
                            if (jogo.modo == "B") {
                                if (jogo.label == true) {
                                    icone = "three-c.png";
                                } else {
                                    icone = "four-c.png";
                                }
                            }
                        }

                        $("#results-image").html("<img src='resource/img/global/game/" + icone + "'>");

                    } else {
                        //starting to boot game
                        game.state.start('boot');
                    }
                } else
                    alert('Erro: nao consegui ler o conteudo de ' + iLMparameters.iLM_PARAM_Assignment);
            }, "json");

            var conta = true;
            var iterator = 0;
            var hits = [0, 0, 0, 0];
            var errors = [0, 0, 0, 0];
            var start = [0, 0, 0, 0];
            var end = [0, 0, 0, 0];

        } else { // If Not SendAnswer (teacher) ::Igor
            $("#form-create").css("display", "block");
        }

        function sendResults(final) {
            var str = "{"
                    + '"shape": "' + jogo.shape
                    + '", "modo": "' + jogo.modo
                    + '", "label": "' + jogo.label
                    + '", "operator": "' + jogo.operator
                    + '", "difficulty": "' + jogo.difficulty
                    + '", "num": "' + jogo.num
                    + '", "results": {';
            for (j = 0; j < iterator; j++) {
                str += '"' + (j + 1) + '": { "phase": "' + (j + 1)
                        + '", "hits": "' + hits[j]
                        + '", "errors": "' + errors[j]
                        + '", "start": "' + start[j]
                        + '", "end": "' + end[j]
                        + '" }' + ((j + 1 < iterator) ? "," : "");
            }
            str += "}}";
            console.log(str);
            $.post(iLMparameters.iLM_PARAM_ServerToGetAnswerURL, {return_get_answer: 1, iLM_PARAM_ActivityEvaluation: final, iLM_PARAM_ArchiveContent: str}, function (d) {});
        }

        function register_start() {
            var str = "{"
                    + '"shape": "' + jogo.shape
                    + '", "modo": "' + jogo.modo
                    + '", "label": "' + jogo.label
                    + '", "operator": "' + jogo.operator
                    + '", "difficulty": "' + jogo.difficulty
                    + '", "num": "' + jogo.num
                    + '"';
            str += "}";
            $.post(iLMparameters.iLM_PARAM_ServerToGetAnswerURL, {iLM_PARAM_ActivityEvaluation: 0, iLM_PARAM_ArchiveContent: str}, function (d) {});
        }

        function finish_redirect() {
            var t = (parent.document.location + " ").split("?")[0];
            t += "?id=" + getParameterFromParent("id") + "&userid_iassign=" + getParameterFromParent("userid_iassign");
            t += "&action=view&iassign_current=" + getParameterFromParent("iassign_current");
            if (parent.document.location == t) {
                parent.document.location.reload();
            } else {
                window.parent.location = t + "#iLM";
            }
        }

        function timeConverter(UNIX_timestamp) {
            var a = new Date(UNIX_timestamp * 1000);
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var year = a.getFullYear();
            var month = months[a.getMonth()];
            var date = a.getDate();
            var hour = a.getHours();
            var min = a.getMinutes();
            var sec = a.getSeconds();
            var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec;
            return time;
        }

        String.prototype.toHHMMSS = function () {
            var sec_num = parseInt(this, 10); // don't forget the second param
            var hours = Math.floor(sec_num / 3600);
            var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
            var seconds = sec_num - (hours * 3600) - (minutes * 60);

            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return hours + ':' + minutes + ':' + seconds;
        }
        function getParameterFromParent(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(parent.document.location.search);
            return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
        }

    </script>
</html>