// Global Variables var current_topic_id = ""; var current_subtopic_id = ""; var next_subtopic_id = ""; var num_topics = "5"; var num_sub_topics = ""; var docHash = ""; var docHashArray; // RedDot implementation specific Javascript below var default_topic; var starter_topic; var tlinx = {}; var torder = {}; var tnext = []; var tcounter = 0; starter_topic = "01"; tlinx["01"] = "29.xml"; torder["01"] = tcounter; tnext[tnext.length] = "29.xml"; tcounter++; tlinx["02"] = "28.xml"; torder["02"] = tcounter; tnext[tnext.length] = "28.xml"; tcounter++; tlinx["03"] = "32.xml"; torder["03"] = tcounter; tnext[tnext.length] = "32.xml"; tcounter++; tlinx["04"] = "30.xml"; torder["04"] = tcounter; tnext[tnext.length] = "30.xml"; tcounter++; tlinx["05"] = "31.xml"; torder["05"] = tcounter; tnext[tnext.length] = "31.xml"; tcounter++; var num_topics = tcounter; default_topic = "0" + tcounter; var subtlinx = {}; subtlinx["01"] = "24.xml"; subtlinx["02"] = "14.xml"; subtlinx["03"] = "23.xml"; subtlinx["04"] = "19.xml"; subtlinx["05"] = "21.xml"; subtlinx["06"] = "15.xml"; subtlinx["07"] = "20.xml"; subtlinx["08"] = "16.xml"; subtlinx["09"] = "17.xml"; subtlinx["10"] = "18.xml"; subtlinx["11"] = "25.xml"; subtlinx["12"] = "22.xml"; // RedDot implementation specific Javascript above function initPage() { if (window.location.search) { docHash = window.location.search.replace("?", ""); } else { // If you want a different topic to show up first // Change this value docHash = "01"; } // Break the docHash up into an array // This should turn into //[0] = topic_id //[1] = subtopic_id //[2] = number_of_topics docHashArray = docHash.split("-"); // Setup the current_topic_id variable current_topic_id = docHashArray[0]; if (docHashArray.length > 2) { current_subtopic_id = docHashArray[1]; } else { current_subtopic_id = "01"; } } // This function is used to load up the main summary page // This page is the one that is before the video page. function loadMainPage() { var data; $.ajax({ url: tlinx[current_topic_id], dataType: "xml", async: false }).done( function(returnedData) { console.log( $(returnedData) .children("topic") .children("sub_topics") ); data = returnedData; } ); // Clear content $("#content").html(""); // Setup the question var title = $(data) .children("topic") .children("name") .text() .trim(); $("#subheader span").html(title); // Create the main layout $("#content").append( "<div class='vid_txt_wrap'>" + "<div id='summary_col' class='panel panel-unstyled'></div> " + "<div id='text_col'><div id='text_col_summary'></div></div></div>" + "<div style='clear:both;'></div>" ); image_link = $(data) .children("topic") .children("image") .text() .trim(); image_alt_text = $(data) .children("topic") .children("image_alt_text") .text() .trim(); summary_text = $(data) .children("topic") .children("summary") .text() .trim(); $("#summary_col").append("<div id='topic_image'></div>"); $("#topic_image").html( "<img src='" + image_link + "' alt='" + image_alt_text + "'>" ); $("#summary_col").append("<div id='topic_summary'></div>"); $("#topic_summary").html("<p>" + summary_text + "</p>"); // We need to loop to get the sub topics $(data) .children("topic") .children("sub_topics") .children("sub_topic") .each(function() { // Get the id // This is the var current_sub_topic_id = $(this) .children("id") .text() .trim(); $.ajax({ url: subtlinx[current_sub_topic_id], dataType: "xml", async: false }).done(function(newData) { var subtopic_name = $(newData) .children("sub_topic") .children("name") .text() .trim(); var subtopic_summary = $(newData) .children("sub_topic") .children("summary") .text() .trim(); $("#text_col_summary").append( "<div><span class='question'><a href='timeline_video.htm?" + current_topic_id + "-" + current_sub_topic_id + "-" + num_topics + "'>" + subtopic_name + "</a></span><p>" + subtopic_summary + "</p></div>" ); }, "xml"); }); // Reset the images $("img.event").attr("src", "gifjpg/bullet_off.png"); $("#tl_" + current_topic_id).attr("src", "gifjpg/bullet_on.png"); $("a").each(function() { $(this).removeClass("active_topic"); }); $("#" + current_topic_id).addClass("active_topic"); } var myPlayer, playerHTML; // +++ Set the data for the player +++ // +++ Build the player and place in HTML DOM +++ function addPlayer(playerData) { // Dynamically build the player video element playerHTML = '<video id="frb-video" data-video-id="' + playerData.videoId + '" data-account="' + playerData.accountId + '" data-player="' + playerData.playerId + '" data-embed="default" class="video-js" controls></video>'; // Inject the player code into the DOM document.getElementById("video_col").innerHTML = playerHTML; // Add and execute the player script tag var s = document.createElement("script"); s.src = "https://players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js"; // Add the script tag to the document document.body.appendChild(s); // Call a function to play the video once player's JavaScropt loaded s.onload = callback; } function seek(time) { // Advance to cue point, start playing if not playing. myPlayer.currentTime(time); if (myPlayer.paused()) { myPlayer.play(); } } // +++ Initialize the player and start the video +++ function callback() { myPlayer = bc("frb-video"); // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly // myPlayer = bc(document.getElementById('frb-video')); myPlayer.on("loadedmetadata", function() { var videoInfo = ""; var transcriptLinkLabel; if (myPlayer.mediainfo.custom_fields["actualdatetext"]) { videoInfo += "<p>" + myPlayer.mediainfo.custom_fields["actualdatetext"] + "</p>"; } if (myPlayer.mediainfo.custom_fields["transcriptlinkurl"]) { if (myPlayer.mediainfo.custom_fields["transcripttext"]) { transcriptLinkLabel = myPlayer.mediainfo.custom_fields["transcripttext"]; } else { transcriptLinkLabel = "Transcript (PDF)"; } videoInfo += "<p><a href='" + myPlayer.mediainfo.custom_fields["transcriptlinkurl"] + "'>" + transcriptLinkLabel + "</a></p>"; } var chaptersElem = $("<ul/>").addClass("list-unstyled"); var cuePointAra = myPlayer.mediainfo.cue_points; // loop over all the cue points for (i = 0; i < cuePointAra.length; i++) { // we're looking for "code" (type = 1) cue points, there will also be some // ad cue points in the list so check the type if (cuePointAra[i].type == "CODE") { // dynamically add a new link for the current cue point chaptersElem.append( "<li><a href='javascript:' onclick='seek(" + cuePointAra[i].time + ")'>" + cuePointAra[i].name + "</a></li>" ); } } $("#videoDetails") .html(videoInfo) .append(chaptersElem); }); } function loadVideoPage() { var data; var playerData = { accountId: "66043936001", playerId: "default" }; $.ajax({ url: tlinx[current_topic_id], dataType: "xml", async: false }).done( function(returnedData) { data = returnedData; } ); var num_sub_topics = $(data) .children("topic") .children("sub_topics") .children("sub_topic").length; // Clear content $("#content").html( '<span class="globalskip">Details about video are available below it.</span>' ); // Setup the question var title = $(data) .children("topic") .children("name") .text() .trim(); // Need to get new data here $.ajax({ url: subtlinx[current_subtopic_id], dataType: "xml", async: false }).done(function(returnedData) { data = returnedData; }); $(data) .children("sub_topic") .each(function() { if ( $(this) .children("id") .text() .trim() == current_subtopic_id ) { var subheader = $(this) .children("name") .text() .trim(); $("#subheader span").html(title); // Setup the default layout for the video and text $("#content").append("<h3>" + subheader + "</h3>"); $("#content").append( "<div class='row'><div class='col-xs-12 col-sm-6'><div class='panel panel-unstyled'><div class='panel-body'>" + "<div id='video_col' class='embed-responsive'></div><div id='videoDetails'></div></div></div></div>" + "<div class='col-xs-12 col-sm-6'><div id='text_col'></div></div>" + "</div>" + "<div style='clear:both;'></div>" ); // Setup the video div $video_link = $(this) .children("video") .children("embed_code") .text() .trim(); playerData.videoId = $video_link; addPlayer(playerData); // Video Caption and Topics caption = $(this) .children("video") .children("caption") .text() .trim(); $("#video_col").append( "<div class='caption'><p>" + caption + "</p><p><ul></ul></p></div>" ); // Loop through topics $(this) .children("video") .children("topics") .children("topic") .each(function() { $("#video_col ul").append( "<li>" + $(this) .text() .trim() + "</li>" ); }); // Setup the text div $(this) .children("video") .children("notes") .each(function() { $("#text_col").append( "<p>" + $(this) .text() .trim() + "</p>" ); }); // Setup the questions for review var questions_review_ul = document.createElement("ul"); questions_review_ul.id = "questions_for_review_list"; $("#text_col").append(questions_review_ul); $(this) .children("video") .children("questions") .children("question") .each(function() { //$("#text_col").append("<li>" + $(this).text() + "</li>"); $("#questions_for_review_list").append( "<li>" + $(this) .text() .trim() + "</li>" ); }); $("#content").append( "<div id='summary' tabindex='11'><span class='icon icon__sm icon--left icon-plus'></span>Summary</div>" ); summary_content = $(this) .children("video") .children("summary") .text() .trim(); $("#content").append( "<div id='summary_content'>" + summary_content + "</div><hr>" ); // Setup the buttons $("#content").append( "<div id='nav_buttons'>" + "<a tabindex='12' href='timeline_main.htm?" + current_topic_id + "'>Home</a>" + "<a class='pull-right' tabindex='13' href='timeline_quiz.htm?" + current_topic_id + "-" + current_subtopic_id + "-" + num_topics + "'>Continue<span class='icon icon__sm icon--right icon-more'></span></a>" + "</div>" ); // Setup Summary onclick $("#summary").keyup(function(e) { if (e.which == "13" || e.which == "32") { $("#summary_content") .toggle() .focus(); $("html, body").animate({ scrollTop: $("#summary").offset().top }); } }); $("#summary").mouseup(function() { $("#summary_content") .toggle() .focus(); $("html, body").animate({ scrollTop: $("#summary").offset().top }); }); } }); // Reset the images $("img.event").attr("src", "gifjpg/bullet_off.png"); $("#tl_" + current_topic_id).attr("src", "gifjpg/bullet_on.png"); $("a").each(function() { $(this).removeClass("active_topic"); }); $("#" + current_topic_id).addClass("active_topic"); // Button Clicks $("#btnContinue").click(function() { $.get( page, function(data) { loadQuestionPage(data, current_subtopic_id); }, "xml" ); }); $("#btnHome").click(function() { loadPage("#" + nav_id); }); } function loadQuestionPage() { var data; var topic_index; var topic_data; var next_subtopic_data; var next_subtopic_id; var next_link; var nav_caption; var letters = []; letters[0] = "a"; letters[1] = "b"; letters[2] = "c"; letters[3] = "d"; $.ajax({ url: tlinx[current_topic_id], dataType: "xml", async: false }).done( function(returnedData) { topic_data = returnedData; } ); var num_sub_topics = $(topic_data) .children("topic") .children("sub_topics") .children("sub_topic").length; $(topic_data) .children("topic") .children("sub_topics") .children("sub_topic") .each(function(intIndex) { if ( $(this) .children("id") .text() .trim() == current_subtopic_id ) { topic_index = intIndex; } }); if (topic_index < num_sub_topics - 1) { // Lets get the next index data and pull the page var sub_topics_array = $(topic_data) .children("topic") .children("sub_topics") .children("sub_topic"); next_subtopic_data = sub_topics_array[topic_index + 1]; next_subtopic_id = $(next_subtopic_data) .children("id") .text() .trim(); // $.ajax({url:"/CMS/PlugIns/temp/subtopics/" + next_subtopic_id + ".xml", async:false}).done(function(returnedData) { next_subtopic_data = returnedData; }); $.ajax({ url: subtlinx[next_subtopic_id], dataType: "xml", async: false }).done(function(returnedData) { next_subtopic_data = returnedData; }); next_link = "timeline_video.htm?" + current_topic_id + "-" + next_subtopic_id + "-" + num_topics; // $.ajax({url:"/CMS/PlugIns/temp/subtopics/" + next_subtopic_id + ".xml", async:false}).done(function(nexttopic_data) { $.ajax({ url: subtlinx[next_subtopic_id], dataType: "xml", async: false }).done(function(nexttopic_data) { nav_caption = $(nexttopic_data) .children("sub_topic") .children("name") .text() .trim(); }, "xml"); } else { // Lets get the next topic if (parseInt(current_topic_id) == num_topics) { next_link = "timeline_main.htm?01"; } else { var next_topic_id = parseInt(current_topic_id) + 1; if (next_topic_id.toString().length == 1) { next_topic_id = "0" + next_topic_id; } next_link = "timeline_main.htm?" + next_topic_id; } } // Clear content $("#content").html(""); // Setup the question var title = $(topic_data) .children("topic") .children("name") .text() .trim(); // Need to get new data here // $.ajax({url:"/CMS/PlugIns/temp/subtopics/" + current_subtopic_id + ".xml", async:false}).done(function(returnedData) { data = returnedData; }); $.ajax({ url: subtlinx[current_subtopic_id], dataType: "xml", async: false }).done(function(returnedData) { data = returnedData; }); $("#subheader span").html(title); $(data) .children("sub_topic") .each(function(intIndex) { var question = $(this) .children("name") .text() .trim(); // Setup main question $("#content").append("<h3>" + question + "</h3>"); // Setup the default layout for the video and text $("#content").append( "<div id='check_knowledge'></div><div id='further_consideration'></div><div id='resources'></div>" ); /* ############## Starts Questions ################# */ // Setup the Check your knowledge section $("#check_knowledge").append("<h4>Check Your Knowledge</h4>"); $(this) .children("checkup") .children("questions") .children("question") .each(function() { var html = "<hr><div class='question_container'>"; html += "<span class='question'>" + $(this) .children("text") .text() .trim() + "</span>"; html += "<div class='answers'>"; var answer_type = $(this) .children("type") .text() .trim(); var question_id = $(this) .children("id") .text() .trim(); var count_of_answers = $(this) .children("available_answers") .children("answer").length; var correct_answer = $(this) .children("correct_answer") .text() .trim(); var feedback = []; // Setup Answers $(this) .children("available_answers") .children("answer") .each(function(intIndex) { html += "<span><input class='answer' type='" + answer_type + "' name='q_" + question_id + "' id='" + $(this) .children("id") .text() .trim() + "' data-feedback='" + $(this) .children("feedback") .text() .trim() + "'> " + $(this) .children("text") .text() .trim() + "</span>"; feedback[intIndex] = $(this) .children("feedback") .text() .trim(); }); // console.log(feedback); // We need to have a submit button html += "<span><input class='btn btn-default button check' type='button' value='Submit' name='q_" + question_id + "_button' data-check='q_" + question_id + "' id='q_" + question_id + "_button'></span>"; html += "</div><div id='q_" + question_id + "_feedback' class='feedback'></div></div>"; $("#check_knowledge").append(html); /* ################### DYNAMIC QUESTION FUNCTIONS BUILT HERE #################### */ $(".check") .off("click") .click(function(a) { var check = $(this).data("check"); var answer = $('[name="' + check + '"]:checked'); var response = $(answer).data("feedback"); $("#" + check + "_feedback") .html(response) .show(); }); }); /* ############### END QUESTIONS ################ */ /* We are adding in the ability to not show this content if there are no questions for further consideration */ // Create an array to hold the questions var further_consideration_questions = $(this) .children("checkup") .children("further_consideration") .children("questions") .children("question"); if (further_consideration_questions.length > 0) { $("#further_consideration").append( "<hr><h4>Questions for Further Consideration</h4>" ); $(further_consideration_questions).each(function() { $("#further_consideration").append( "<span>" + $(this) .children("text") .text() .trim() + "</span>" ); }); } else { $("#further_consideration").hide(); } /* We are adding in the ability to not show this content if there are no resources for the questions */ // Create an array to hold the resources var resource_links = $(this) .children("checkup") .children("resources") .children("resource"); if (resource_links.length > 0) { $("#resources").append("<h4>Resources</h4>"); var linksdiv = document.createElement("div"); linksdiv.id = "links"; linksdiv.className = "links"; $("#resources").append(linksdiv); $(resource_links).each(function() { $("#links").append( "<span><a href='" + $(this) .children("url") .text() .trim() + "' target='_blank'>" + $(this) .children("name") .text() .trim() + "</a><span>" ); }); } else { $("#resources").hide(); } // Setup the buttons $("#content").append( "<div id='nav_buttons'>" + "<a href='timeline_video.htm?" + current_topic_id + "-" + current_subtopic_id + "-" + num_topics + "'><span class='icon icon__sm icon--left icon-more icon--rotate'></span>Back</a>" + // "<a href='timeline_main.htm?" + // current_topic_id + // "'>Home</a>" + "<a class='pull-right' href='" + next_link + "'>Continue<span class='icon icon__sm icon--right icon-more'></span></a>" + "</div>" ); // Next Button (Continue) & (Next Topic) if (nav_caption == "" || typeof nav_caption === "undefined") { var NextEventName = ""; var nt = ""; if (torder[current_topic_id] == docHashArray[2]) { //nt = "01.xml"; nt = tlinx[starter_topic]; } else { //nt = torder[current_topic_id] + 1; //if( nt.toString().length < 2 ) { nt = "0" + nt; } //nt += ".xml"; nt = tnext[torder[current_topic_id] + 1]; } // $.ajax({url: "/CMS/PlugIns/temp/timeline/" + nt, dataType:"xml", async: false}).done(function(d){ NextEventName = $(d).children("topic").children("name").text();}); $.ajax({ url: nt, async: false }).done(function(d) { NextEventName = $(d) .children("topic") .children("name") .text() .trim(); }); $("#content").append( "<div style='clear:both;'></div><div id='nav_caption'><span><b>Next Event</b>: " + NextEventName + "</span></div>" ); } else { $("#content").append( "<div style='clear:both;'></div><div id='nav_caption'><span><b>Next Topic</b>: " + nav_caption + "</span></div>" ); } // Reset the images $("img.event").attr("src", "gifjpg/bullet_off.png"); $("#tl_" + current_topic_id).attr("src", "gifjpg/bullet_on.png"); $("a").each(function() { $(this).removeClass("active_topic"); }); $("#" + current_topic_id).addClass("active_topic"); }); }