New project, question regarding one required spec

steelcitydev · March 1, 2015

I got a new project today, custom PHP based website for employee training. One requirement for the site is the training videos need to automatically pause in 30 second intervals to display a question - accompanied with 4 radio buttons displaying three incorrect and one correct answer. My question, how would you go about managing the videos to pause the video and popup the html form with the correct and incorrect answers? Would you be working within js, could this be done solely with php? ffmpeg? etc.

Thank you guys for the advice!

dominic.

ignace · March 1, 2015

If you are using HTML5 and the <video/> tag you can use the Video API.

Otherwise if you are using YouTube or Vimeo they both expose their own API.

steelcitydev · March 1, 2015

we will be using the html5 video self hosted. Here is a question I know i can pause the video at a specific time - ie 30 seconds, but i need the video to continue playing ONLY when the correct answer is chosen. i will be using PHP for the quiz and questiosn - storinhg them inside mysql. im thinking i will need to manipulate the video.js file, but unsure if there is a better way.

steelcitydev · March 2, 2015

bump, anybody else have any ideas?

rwhite35 · March 2, 2015

If you want to use PHP (server side tech) to query the db, you'll need to reload the page. Otherwise you're stuck with a complicated JS solution. I think the most efficient strategy would be to cut the video up into :30 second segments, each having its own file. Then you can absolutely control the web users flow through the training session. Including when they have to exit and come back at a later date/time. This way, you store their progress and they can pick up where they left off.

tryingtolearn · March 2, 2015

with a combo of php and ajax you could load the video and start a timer

at a set interval pause the video and load the first question

Submit it and if correct resume the video and timer

and continue that process...

Here is a rough outline that would pass the cycle # to the php page which could be used to id the answer from the db result or however you are setting that portion up.

It wont address the valid point that rwhite35 brought up about the user exiting and coming back but it could probably be worked in.

index

<!DOCTYPE html>
<html>
<head>
    <style>
            #status{
                background-color: #ffdddd;
            }
            #myVid{
                width:50%;
                float:left;
            }
            #myTest{
                width:50%;
                float:left;
                visibility: hidden;
            }
            video{
                width:80%;
            }
        </style>
    <script>
        var qCycle=0;
        function myOverlay() {
            ol = document.getElementById("myTest");
            ol.style.visibility = (ol.style.visibility == "visible") ? "hidden" : "visible";
        }
        
        function timer(time,update,complete) {
            var start = new Date().getTime();
            var interval = setInterval(function() {
                var now = time-(new Date().getTime()-start);
                if( now <= 0) {
                    clearInterval(interval);
                    qCycle++;
                    complete();
                }
                else update(Math.floor(now/1000));},10);
        }
        
        function showTest(str) {
            if (str.length == 0) {
                document.getElementById("txtAns").innerHTML = "";
                return;
            } else {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("txtAns").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "getAns.php?q=" + str, true);
                xmlhttp.send();
            }
        }
        
        function myStart() {
            timer(10000, function(timeleft) { // called every step to update the visible countdown
                document.getElementById('status').innerHTML = timeleft+" second(s) left before the video will pause for the test";
                document.getElementById('demo').play();
            },function() { // what to do after
                //alert("Timer complete!");
                document.getElementById('status').innerHTML = "Video paused for test cycle "+qCycle;
                document.getElementById('cycle').innerHTML = qCycle;
                document.getElementById('demo').pause();
                myOverlay();
            });
        }
        
        function myClose() {
            myOverlay();
            timer(10000, function(timeleft) {
                document.getElementById('status').innerHTML = timeleft+" second(s) left before the video will pause for the test";
                document.getElementById('demo').play();
            },function() {
                document.getElementById('status').innerHTML = "Video paused for test cycle "+qCycle;
                document.getElementById('cycle').innerHTML = qCycle;
                document.getElementById('demo').pause();
                myOverlay();
            });
        }
        
    </script>
    </head>
    <body>
        <div id="status">Press Start To Begin <button onclick="myStart()">Start</button></div>
        <div id="myVid">            
            <video id="demo" src="big_buck_bunny_480p_stereo.ogg">
                Your browser does not support the <code>video</code> element.
            </video>
        </div>
        <div id="myTest">            
            <div>Test Cycle:</div>
            <div id="cycle"></div>
            <p>Test Code Here.<br />Video and timer will start again when you click Resume Video</p>
            
            
            <p>when you hit submit it will pass the cycle # to the php page where you could use that for the question and answer reference: <br /><span id="txtAns"></span><br /><button onclick="showTest(document.getElementById('cycle').innerHTML)">Submit</button></p>

            
            <button onclick="myClose()">Resume Video</button>
        </div>
    </body>
</html>

php

<?php
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
if ($q !== "") {
   
            if ($hint === "") {
                $hint = $q;
            } else {
                $hint = "No Result Could Be Located";
            }
        }

echo $hint === "" ? "no suggestion" : $hint;
?>

ignace · March 2, 2015

I know i can pause the video at a specific time - ie 30 seconds, but i need the video to continue playing ONLY when the correct answer is chosen.

Use AJAX to validate the answer, if it's wrong stop playing otherwise proceed.

TOA · March 2, 2015

What you're describing is the basic functionality of a Learning Management System. They have content authoring programs that can embed quizzes and everything. The two I can think of off the top of my head are Lectura and Articulate. (Note, I have used Articulate in the past, but it's been a few years so their offerings may have changed.) If I remember correctly, you can host/run them from your own site. Don't re-invent the wheel if you don't have to.

Hope that helps.

Sign In

New project, question regarding one required spec

Recommended Posts

steelcitydev

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

steelcitydev

Link to comment

Share on other sites

steelcitydev

Link to comment

Share on other sites

rwhite35

Link to comment

Share on other sites

tryingtolearn

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

TOA

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information