Register

Can I Show the Amount of Time Remaining?

Questions regarding the authoring of Viewlets, installation or possible bugs with our products. For urgent issues, please use our support form on our website: http://www.qarbon.com/help/helpme.php
User
Posts: 25
Joined: Mon Apr 21, 2008 12:36 pm

Can I Show the Amount of Time Remaining?

Postby crclee » Mon Apr 21, 2008 12:57 pm

Hi

There is probably a simple solution to this problem, but I've searched the FAQs, forums and guides to no avail, so here goes:

I want to be able to show the amount of time remaining in a VB5 timed quiz but cannot find any way to do it. From various forum posts and some information in one of the FAQs, it seems that it might be possible to achieve this with javascript code, but, to be honest, my whole purpose in evaluating VB5 as a possible content creation tool is so I can avoid programming.

Is there any way to do this? Ideally, the time remaining would be shown in a 'label' that updates automatically. I can do this easily in competing products, so I'm hoping there is a way to do this with VB5.

Thanks

CRC Lee
Thanks,

CRCLee

Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Re: Can I Show the Amount of Time Remaining?

Postby Andrew » Tue Apr 22, 2008 8:23 am

Yes you can show time remaining you need to do the following:

In Project Properties select Viewlet Options
Click Time Limit and enter a Time Limit.
Then make sure "Display Player Bar" and "Display Status Bar" are selected
The status bar will display the time remaining.

ViewletOptions.png
ViewletOptions.png (88.19 KiB) Viewed 11030 times


It will show up at the bottom of the Viewlet like this:

TimeRemaining.png
TimeRemaining.png (5.23 KiB) Viewed 11028 times


One issue with VB5 is that once the time is expired, it doesn't display a message to the
user. It simply notes that the user timed out in ViewletCentral reporting.

However in VB6, shipping in early May, you can also specify what action to take when
the Viewlet has timed out. For example you can specify to display a slide with
a message.

ViewletOptionsVB6.png
ViewletOptionsVB6.png (63.36 KiB) Viewed 11028 times


VB6 is currently available in beta. If you send me a private message, I can give you
the URL to download it. Additionally, if you're interested in
Quizzing ViewletBuilder6 Enterprise has a large number of quiz types.
Andrew Branch

User
Posts: 25
Joined: Mon Apr 21, 2008 12:36 pm

Re: Can I Show the Amount of Time Remaining?

Postby crclee » Tue Apr 22, 2008 11:38 am

Thanks for the replies. I should have been clearer in my original post and specified that I'm evaluating VB for an intended project (a quiz) that allows users little or no control over navigation. Basically, users can only navigate in one direction through the test. They cannot pause the test or go back to previous slides. As I understand it, showing the status bar allows this type of navigation, which will not work for me. In fact, I would think that a pause button pretty much defeats the whole idea of a time limit!

From the forum and FAQs, it seems that there is a variable that holds the remaining time. Is there any way to access this variable to show the remaining time in a text object? Ideally, I would like a 'label' at the top of the screen that continually updates, but a 'label' that updates when each new slide loads might be acceptable. If not, this would certainly be a useful feature to have. In fact, exposing all the variables (and even allowing user defined ones) would be great. Is this something planned for VB6?

As it stands right now, if I cannot show the time remaining without also allowing users to control navigation, I might not be able to use ViewletBuilder for my projects, which would be a shame as I've been pretty impressed with most things about the package.
Thanks,

CRCLee

Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Re: Can I Show the Amount of Time Remaining?

Postby Andrew » Tue Apr 22, 2008 1:42 pm

With some JavaScript we can do what you want. By creating a ViewletBuilder HTML Frame file that contains the JavaScript, you can use it for any project you create.

Create a new project.
Open Project Properties - HTML Frames
Click the green plus button to create a new HTML Frame.
Name the frame "Countdown"
Double click on the file named "$VIEWLET_NAME$_viewlet_swf.html" to open it, or select it and click the pencil icon.
Below the $VIEWLET_HEAD_TAG$ paste the following JavaScript:

Code: Select all
    <script language="JavaScript">
    var timeLimit;
    var startTime;
    var intervalID;

    <!--
    function startCountdown() {
   timeLimit = window.document.$VIEWLET_NAME$.GetVariable("TIME_LIMIT");
   startTime = new Date();
        intervalID = setInterval("updateCountdown()", 1000);
    }

    function updateCountdown() {
   var curTime = new Date();
   var elapsedTime = curTime.getTime() - startTime.getTime();
   var remainingTime = timeLimit - elapsedTime;
   if(remainingTime < 0)
      remainingTime = 0;

   var hours = Math.floor(remainingTime / 3600000);
   if(hours < 10)
      hours = "0" + hours;
   remainingTime = remainingTime % 3600000;
           
   var minutes = Math.floor(remainingTime / 60000);
   if(minutes < 10)
      minutes = "0" + minutes;
   remainingTime = remainingTime %  60000;
           
   var seconds = Math.floor(remainingTime / 1000);
   if(seconds < 10)
      seconds = "0" + seconds;

   remainingTime = hours + ":" + minutes + ":" + seconds;

        document.getElementById('timeRemaining').innerHTML = remainingTime;   
    }
   
    //-->
    </script>


Then change the <body> tag to look like this:

Code: Select all
  <body bgcolor="#ffffff" onLoad="startCountdown()">


Then add the following at the below the $VIEWLET_BODY_TAG$

Code: Select all
    <br><br>Time Remaining: <span id="timeRemaining">00:00:00</span><br>


Then in Project Properties select the following:

Viewlet Skin - Select "Simple.qvskin" from the dropdown list (this will remove the pause button)
Viewlet Options - Click the "Time Limit" checkbox and enter a time.

Publish the Viewlet and you should see Time Remaining: hh:mm:ss at the bottom of the page that is updated every second.

Hope this helps....
Andrew Branch

User
Posts: 25
Joined: Mon Apr 21, 2008 12:36 pm

Re: Can I Show the Amount of Time Remaining?

Postby crclee » Tue Apr 22, 2008 2:03 pm

Andrew wrote:With some JavaScript we can do what you want.

SNIP

Publish the Viewlet and you should see Time Remaining: hh:mm:ss at the bottom of the page that is updated every second.
Hope this helps....


Excellent! I will try this out later. I've been very impressed with the support on this forum. Prompt and pertinent. Thanks.
Thanks,

CRCLee

User
Posts: 4
Joined: Tue Mar 13, 2012 10:46 am

Re: Can I Show the Amount of Time Remaining?

Postby Ressem » Tue Mar 13, 2012 11:23 am

Hello
I need the exact same feature as crlee announced. The java script code solution would be an excellent option. Unfortunately it did not work as intended in Viewletbuilder 6.2.21 enterprise version.

Time Remaining is visible in the slides but shows constantly 00:00:00 (it does not correspond to the time limit set in properties "Scoring options")
I tried to change the 00:00:00 (VIEWLET_BODY_TAG) to a another number to see if something changed. It did for one second and then turned back to 00:00:00.

Anyone?

Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Re: Can I Show the Amount of Time Remaining?

Postby Andrew » Tue Mar 13, 2012 1:44 pm

Try this update to the script.

The variable timeLimit in the startCountdown was getting set to null. I think Flash wasn't initialized yet and ready to return the variable.
Now it calls it in the updateCountdown function and that seems to work better with 6.2.22. I tested on the latest versions of IE, Firefox and Chrome.

Code: Select all
<script type="text/javascript" language="JavaScript">
<!--
function startCountdown() {
    startTime = new Date();
    intervalID = setInterval("updateCountdown()", 1000);
}

function updateCountdown() {
    var timeLimit = window.document.$VIEWLET_NAME$.GetVariable("TIME_LIMIT");
    var curTime = new Date();
    var elapsedTime = curTime.getTime() - startTime.getTime();
    var remainingTime = timeLimit - elapsedTime;
    if(remainingTime < 0)
        remainingTime = 0;

    var hours = Math.floor(remainingTime / 3600000);
    if(hours < 10)
        hours = "0" + hours;
    remainingTime = remainingTime % 3600000;

    var minutes = Math.floor(remainingTime / 60000);
    if(minutes < 10)
        minutes = "0" + minutes;
    remainingTime = remainingTime %  60000;

    var seconds = Math.floor(remainingTime / 1000);
    if(seconds < 10)
        seconds = "0" + seconds;

    remainingTime = hours + ":" + minutes + ":" + seconds;

    document.getElementById('timeRemaining').innerHTML = remainingTime;   
}
-->
</script>
Andrew Branch

User
Posts: 4
Joined: Tue Mar 13, 2012 10:46 am

Re: Can I Show the Amount of Time Remaining?

Postby Ressem » Wed Mar 14, 2012 1:26 am

Thank you Andrew

Works great, also on Safari.


Very happy customer. Thanx again

R

User
Posts: 4
Joined: Tue Mar 13, 2012 10:46 am

Re: Can I Show the Amount of Time Remaining?

Postby Ressem » Thu Apr 12, 2012 5:51 am

Hei

Many of my respondents have complained that there is difficult to see the remaining time as it´s placed to low on the slide so its becomes cropped (just 50% are visible). Is there are simple way to place the remaining time object further up on the slide?

Hope you can help me.

Best regards
Ressem

Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Re: Can I Show the Amount of Time Remaining?

Postby Andrew » Thu Apr 12, 2012 12:44 pm

The position of the "Time Remaining" depends on the ViewletSkin you use. They all have it in the status bar which runs across the bottom of the Viewlet. For example here's the Time Remaining displayed in the ViewletBuilder7 - Qista ViewletSkin...

Capture.PNG


You can scale your Viewlet to fit in the browser window using Project Properties - Flash - Scale to Fit Web Page. This essentially uses an HTML scale operation to stretch the flash file to make sure it fits within the browser. That will prevent it from being cut off. One disadvantage of scaling the entire flash file, is that it also scales the player bar and time remaining, so they can get pretty small.

Capture2.PNG


Another option is you can resize the project before compiling using the menu option Project - Resize Project. This is different from "Scale to Fit Web Page" it actually scales the slides and their content. This way the status bar isn't stretched by the browser.

Capture3.PNG


Another approach is you can turn off the ViewletSkin status bar entirely (via Project Properties - Viewlet Options - Display Status Bar) and use the javascript specified above to add an HTML time remaining outside of the Viewlet. Then you can place it anywhere you want on the page, above or below the Viewlet.
Andrew Branch

Return to General Discussions

Who is online

Users browsing this forum: No registered users and 1 guest