You Tube Video API - LMS

A demo showing how video might be used in a Learning Management System.

by Brian von Konsky

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<!-- See External Resources for you tube api reference -->
<!-- https://www.youtube.com/iframe_api"               -->

<h2> Video in an LMS </h2>
<p> This demonstrates the use of video in an LMS</p>
<div id='player'></div>
<div id='chooseVideo'></div>
<div id="result" class='ux'></div>

CSS

.ux {
    float: left;
    padding: 1%;
    width: 48%;
}

.correct {
    color: green;
}

#quiz {
    background-color: lightgray;
}

.incorrect {
    color: red;
}

JavaScript

var player;                 // You Tube player object
var video;                  // Current video
var instructionEnded=false; // Instruction video is still running

// When You Tube API is ready, create a new 
// You Tube player in the div with id 'player'
function onYouTubeIframeAPIReady() {
    resetVideo();
    player = new YT.Player('player', {
        playerVars: {
            autoplay: 1,
            start: 10,
            rel:0,
            theme: "light",
            controls: 1,
            showinfo: 0,
            modestbranding: 1
             
            },
        events: {
            onReady: onReady,
            onStateChange: onStateChange,
            onError: onError
        }
    });
}

function resetVideo() {
    video = media.video;
}

// When the player is ready, play the initial segment
function onReady(event) {
  console.log("ready");
  playSegment();
}

// When the instructional part of the clip has finished
// playing, build the quiz question to test the
// viwers understanding
function onStateChange(event) {
   console.log('onStateChange', event);
    if (event.data == YT.PlayerState.ENDED) {
        if (!instructionEnded) {
            instructionEnded = true;
            buildQuestion();
        }
    }
}

// Log any errors
function onError(event) {
    console.log('onError', event);
}

// Play the video segment
function playSegment( ) {
    // Play the current video
    player.loadVideoById({
        videoId: video
    });
}

// Submit the viewers answer to the multiple choice question
function submit() {
    // Initially assume nothing is checked
    var checked = false;
    var html = "";
    
    // Get the element correspnding to thee multiple choice element
    var mcq = document.getElementsByName('mcq');
    
    // Iterate through the possible choices
    for (var i=0; i<mcq.length; i++) 
        // Proceed if we found the checked radio button
        if (mcq[i].checked) {
            
            // record that an item has...