Jump to content

New project, question regarding one required spec

steelcitydev

By steelcitydev
in PHP Coding Help

 Share

Recommended Posts

steelcitydev Newbie

steelcitydev

Posted
Posted

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. 

steelcitydev Newbie

steelcitydev

Posted
  • Author
Posted

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.

rwhite35 Member

rwhite35

Posted
Posted

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 Regular Member

tryingtolearn

Posted
Posted

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 Advanced Member

ignace

Posted
Posted

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 Member

TOA

Posted
Posted

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. 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.