How to design and code a Timer in AppLab?

CS Principles
1

I’m having trouble finding documentation on how to code a timer in AppLab. Can anyone direct me to the correct place?

Thanks,
Erin

2

Hey Erin,

Check out the documentation on the getTime command - https://docs.code.org/applab/getTime/

-Dani

1 Like
3

you can manually create a delay function like this

function delay(waitTime){
var currentTime = getTime();
var startTime = getTime();
while(currentTime - startTime < waitTime){
currentTime = getTime();
}

}

if that’s not the kind of thing you were looking for, please let me know I am happy to give a better answer!

Brian

1 Like
4

Hi…this code likely won’t work very consistently in JavaScript and may cause the browser to crash.

Because of how JavaScript works…it doesn’t really like it if you write loops to block functionality.

If you want a one-time delay before some code is executed you should check out setTimeout.

For repeatedly executing some code on a timer you can check out the newly added timedLoop which can be found in the control tab. Here is an example from the documentation.

var seconds = 0;
timedLoop(1000, function() {
  seconds = seconds + 1;
  console.log(seconds + " seconds have elapsed");
});

Hope this helps.

Baker
CSP Team

1 Like
5

Baker,
At the risk of thread-jacking, would you be able to briefly describe how you would design a system of say 4 lights (buttons) in app lab which flash in a sequence (like the old memory game Simon)? I taught my class the manual delay loop just above your post in order to keep the lights on for a brief time before turning them off. When we used setTimeout to turn them off, it allowed the execution to continue and turn on other lights before the first light was turned off. For the life of me, I couldn’t find a clear way to explain how to use the app lab API to flash a predetermined sequence of lights.

Thanks for all you guys do for us!

Brian

6

At the risk of oversimplifying…here’s a super simple example that just uses timedLoop


If you want to make this into a game there’s some (read: quite a bit) more work to do.

Also worth noting: this isn’t an app lab thing. It’s a javascript thing. And synchronizing timers is super hard…maybe impossible. So, the typical pattern / mindset is that you should have one timer (and only one) for animation. Set it to whatever delay you like and then write code to do some incremental step at each “tick” of the timer.

Here is another example that shows some bouncing balls: https://studio.code.org/projects/applab/U2n8QalI4-I-oYZJ1SMSIg/
Notice that there is one timer on a delay of 41ms (~24 frames per second).

3 Likes
7

Thanks, Baker. That makes sense to me.
I had a feeling there was a reason there wasn’t a “wait” function. A few minutes ago, I started a thread titled “Simon in App Lab (code-with-me video links)” with a link to a video series I did teaching how to make Simon, and I taught that ‘wait’ function in one of the the videos, which I’m now seeing probably isn’t good practice to be teaching. Now I can’t figure out how to delete the thread. If you feel like you don’t want that blasphemy spreading, any chance you could delete the thread posting? It’s titled “Simon in App Lab (code-with-me video links)”

Thanks again for putting up with us novices! You guys are great.

8

Baker…I’m looking to FLASH on and off a text box to grab the user’s attention. (2 sec ON, then .5 sec OFF)

Like show then hide and REPEAT this until they want to change screens and replay.

I’m having trouble with the timedLoop code. I have used timedLoop before but only in the context you have written above.

Thoughts

Thanks

9

If you want irregular intervals I think your easiest option is to setup a timedLoop that “ticks” every 0.5 secs, and then use a counter to make it stay on for some multiple of 0.5 – 4 “ticks” in your case.

Another way to think of it: if the loop is ticking every 0.5 secs, then you want it to hide the element every 5th tick, and otherwise make sure it’s showing. i.e. you wan 4-ticks-ON, 1-tick-OFF, 4-ticks-ON, 1-tick-OFF.

Example:

2 Likes
10

Thanks Boss

Before your response, I did get something embarrassing to work but your logic is much cleaner.

I had some nested timedLoops with some stopTimedLoop commands. It was messy!

Thanks

When I get some time, I probably make a function which accepts parameters like flashONtime, flashOFFtime, numFlashes, etc

more later

11

@baker This code was found on code.org - https://studio.code.org/projects/applab/lKdpxHql_BiflstHcOcGQA/view If a student uses this, there’s no way to change any part of a timer without it breaking. Correct? If so, they should site the timer. As for the rest of the function, can they explain and use the rest of the function for one of their algorithm? Correct or not? He change looks or it and changed some of the variable names.

1 Like
12

Hi @carmichaelc,

I’m not sure I understand the question. Are you asking about whether a student could modify this project for the Create PT? If so, you’re saying this is the original project, or this is the student’s modification?

13

Student would use some of the code (the timer code found in the project attached) and use it inside one of his functions he said. Everything else in that function is student created. He said he’s tried to change some of the timer code portion that he found but he said it only works when he leaves it intact. He did change the screen. Is there even a way to change this timer code (other than variable names and labels) without breaking it or is it part of the language?

var secondsToday = Math.floor((time % 86400));
var hours = ((secondsToday / 3600 + (correct ? timeZoneCorrection : 0))+24) % 24;
var minutes = 60 * (hours - Math.floor(hours));
var seconds = 60 * (minutes - Math.floor(minutes));

I don’t want to help him on this and wouldn’t know how anyway. My main question - If he cites it and incorporates it into a bigger function, will he be okay to use the bigger function as long as the bigger function does other things?

14

I’d love to have others weigh in on this too.

If he’s using that code in his app, as long as he doesn’t claim it’s part of his abstraction AND he doesn’t claim it’s his main algorithm, I think it would be okay. Obviously safer if this code isn’t included in the algorithm portion that he highlights for the written responses at all. Like for example if this is his way of “including mathematical concepts” I would worry about him saying it came from someone else. Not saying he can’t just feels risky.

FWIW he could probably recreate this code himself without copying. It’s pretty standard fare. A few translations:

That code snippet looks a little incomplete – don’t know what time variable holds.

Anyway to recreate you need to know the app lab function:

getTime() returns the number of milliseconds since midnight, jan 1, 1969. (see docs)

Once you know that, the rest is math to figure out what you want about the time.

Math.floor simply returns the whole number portion of a decimal number regardless of how big the decimal portion is. Math.floor(23.99999) --> 23

% is the modulo operator which returns the remainder from division. (see unit 4 lesson 7). I assume that time is just the result of getTime(). When you do %86400 you’re dividing a big number by 86400 and getting the remainder. Since 86400 is the number of seconds in a day, I assume this is an attempt to extract the number of seconds (or miliseconds) that have elapsed so far today. I’ll need to check my math on that. (I realize this isn’t a great explanation of why this works, but that’s what it’s doing).

the weirdo ? thing is a short way to do an if-statement (that most people think is ugly and makes code hard to read). loosely speaking this: (correct ? timeZoneCorrection : 0) means: if correct is true, then use timeZoneCorrection else use 0. It would take more lines of code to use an if-statement to do the arithmetic for that single line, but would also be much more readable.

I also assume that getTime() returns the time based on wherever the amazon server cluster is that runs applab. So timezoneCorrection is probably just a number to shift the result some number of hours to meet local context.

hope that helps.

1 Like
15

I was trying to make the length of the “delay” change with every repetition of the loop. However, the variable delay is changing but the timedLoop appears to only delay at the original length of the delay upon executing.

Any thoughts?

I’m basically trying to SLOW a carnival spinner down. The spinner is just 8 separate images repeated in a loop.

ARGH!

16

yep. It’s not really a loop that checks the condition each time. So…short version: if you’re trying to do animation, you have to imagine that you’re setting up an animation at a particular frame rate. If the frame rate is constant how do slow something down? make it take more frames (or thinking of it the other way: make it move less and less over time).

I can do up an example if you send me a link to the existing version of your project.

The is another way which is much harder to control - which is the old school way of actually doing what you’re trying to do: changing the delay at “tick”. You can do that with setTimeout which runs a function after a particular delay, but then you also need to recurse…it’s hard to control.

17

Here’s a toy example: https://studio.code.org/projects/applab/ieW3ERamYcJ1ycqxYfGjQA

18

Thanks

19

While App Lab doesn’t have a built-in way to rotate elements, I think for an application like this it’s worth using the advanced setStyle() function to use the CSS rotation transformation. Here’s an example that uses CSS rotation to get your spinner to rotate without relying on a bunch of different images https://studio.code.org/projects/applab/yy_JcjcLe6SyWZ2VLFxZZg/view

2 Likes
20

Cool! I didn’t know there were “hidden” commands we can use! I am going to file this away!

I don’t see it inside the free-play AppLab. I wonder if it would be a value-add to other teachers/students to know that this is a possibility?

@jkeays - see Josh’s post above, just in case you missed it :slight_smile:

1 Like