TeamDesk Knowledge Base & Support

   Home      FAQ      Forum      Idea Exchange      Ask a Question      My Stuff      Help   
  
Countdown timer
Is it possible to design a 'countdown' timer,, or at least a timer that warns users that their allocated time will soon expire?
I have designed an Assessment Test with TeamDesk for a Language School, and one of their requirements is to enforce completion within a specific time (say 90 minutes).
Does anyone have any ideas as to how this could be achieved?
ID
1481
Category
Customization
Author

Luison Lassala
Date Created
11/12/2021 2:34:04 AM
Date Updated
11/13/2021 6:06:19 AM
Comments
Pierre 11/12/2021 2:42:05 AM
Hello Luison
Have you tried Time-dependent triggers
If the user starts at the time T
you create a timestamp field with T+90 minutes
you create a time-dependent trigger - it usually acts within 5 minutes (my understanding is that it checks actions to perform at xx:00, xx:05, xx:10, ... xx:55)

you might maybe also set a form rule:
- freezing the form it the time is past a certain value, it shows a text on the form (the text would be hidden by default, showing it it the time is past the certain value)

Pierre
Luison Lassala 11/12/2021 3:05:01 AM
That's very useful Pierre - thank you for your quick response.
Just a question: how do you 'freeze' a form? Are you referring to some type of Validation Rule? I want the Users to be able to SAVE the form but not fill in any more data when the set time has elpased.
basenine 11/12/2021 3:08:23 AM
A count down timer would be handy, nonetheless.
Esp in this instance
Pierre 11/12/2021 3:09:33 AM
Hello Luison
There is a very powerful feature in TeamDesk where you can freeze / hide fields one by one
Check this:
https://www.teamdesk.net/help/7.2.aspx
It acts on the forms and on the tables (ie if a field is placed in READONLY mode, it will be placed in READONLY in both forms and tables subtables).
You might also act using Table access rules ( https://www.teamdesk.net/help/3.6.aspx ) but I think this is not what you want
Pierre
Luison Lassala 11/12/2021 3:35:00 AM
Thanks Pierre - yes, I am aware of Form Behaviour functionality: I use it all the time! :-)
I was just confused by your use of the word "freeze".
So what you suggest is that the Time-dependent trigger causes a Record Update of a field, which in turn activates a specific Form behaviour?
I guess that should work.

I'm trying to implement the Time-Dependant Workflow Trigger and not getting very far:
the "offset" criteria for the Trigger asks for a "number of Days", even if the column selected is of Time type. Is that just a 'TD design error' or do I have to place the 90 minutes offset in "Day format" (i.e. 0.0625)?
Luison Lassala 11/12/2021 3:39:56 AM
@basenine - yes Brett, I have looked for Time Counters on the web.
Here is a nice example:
https://bedrocksuccessie-my.sharepoint.com/:i:/g/personal/luison_bedrocksuccess_ie/EbE7xz8-caxGjMGr4JoSwOcB3WhY561FVDmuKXY5CPqJSw?e=DHcUbw

I just need to find a way to assign the start time to the Timer dynamically when the user starts the test.
Pierre 11/12/2021 4:00:51 AM
Hello Luison
I made a quick test
The forms rule are only evaluated when the form is displayed or when a change on what is type affects the display rule.
So here to the ALERT field appear, you would need to include the edited fields in the evaluation rule (ex: [Remaining Time]<900s and [TEXT]=[TEXT]) and it would be triggered only if the user moves the cursor from one field to the other.

Time Dependent workflow : It is written date but actually is is a TimeStamp. If you place 0 days (+ or - does not change any thing): they are triggered within 5 minutes of the Timestamp
Luison Lassala 11/12/2021 10:05:02 AM
Pierre, sorry again - I can't figure out how to put all this together. I think there may be a step missing in the process you suggested.
Here is what I have:
field [Time Start] is Timestamp and is set by the User when starts editing the record
field [Time Max] is a formula Timestamp: [Time Start] + Minutes(90)
field [Time Left] is a formula Duration: [Time Max] - Now()
Time-dependent Trigger settings: "Date:" is [Time Max]; "Offset:" is 0; "Actions:" ???? (what Actions should be run by the Trigger?)
Form Behaviour:
Rule: If [Time Left] < Seconds(60) (??? you also have [TEXT]=[TEXT; does that mean [Fiel Ans1]=[Field Ans1] for every Answer field??? Should I not use "not IsNull(Ans1)" instead??
Behaviour: display "Text" and make all fields Read-only

If you can throw some more light here it would be great. I feel we're almost there but haven't cracked it fully yet.
Thanks
Luison Lassala 11/12/2021 10:16:42 AM
Wait! I think I see the problem: I had [Time Left] "is greater than" (>) 60 secs in my Behaviour Rule formula!!!!
I changed it to "is less than" (<) and now it seems to be working - small wonders of the "little things" in life!
Pierre 11/12/2021 10:25:32 AM
Great !
Still it is not very satisfactory as you need the user to change the cursor from one field to another to get an updated value of the time left.
I will look into it again this week-end. Maybe someone else will get another idea?

Have you explored the possibility to do this using Formula XHTML fields ?
https://www.teamdesk.net/help/4.6.17.aspx

Pierre
Pierre 11/12/2021 10:34:22 AM
Luison Lassala 11/12/2021 11:13:56 AM
@Pierre, I assume you refer to trying to connect the Counter with TeamDesk?
Thank you for the pointer: I think it would work.

Here is the HTML text for the Time Counter (https://www.tickcounter.com/api):

<div data-type="countdown" data-dt="2022-01-01 12:30:55" class="tickcounter" style="width: 150px; height: 38px; margin: 0 auto"><a href="//www.tickcounter.com/countdown/2872873/assessment-test-completion" title="Assessment Test Completion">Assessment Test Completion</a><a href="//www.tickcounter.com/" title="Countdown">Countdown</a></div><script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>

What I tried to do was replace the data-dt value between "" (2022-01-01 12:30:55) with a XHTML formula, e.g. "<%[Time Max]%>", but I'm not getting it to work: it gives an error instead of displaying a nice Timer Countdown left to the [Time Max]

Could it have to do with the syntax of my XHTML formula??

(btw, I never learnt to write scripts so my knowledge of HTML and JS is very limited)
Pierre 11/12/2021 1:20:49 PM
Hello Luison

> I never learnt to write scripts so my knowledge of HTML and JS is very limited
Same here

I reached weird results.
I created an XHTLM formula with your tick counter HTML.
It would only display a link


I clicked on the link, copied the EMBED Code provided by tick counter site
<div data-type="countdown" data-id="2874027" class="tickcounter" style="width: 100%; position: relative; padding-bottom: 25%"><a href="//www.tickcounter.com/countdown/2874027/my-countdown" title="My countdown">My countdown</a><a href="//www.tickcounter.com/" title="Countdown">Countdown</a></div><script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>
I created a text line in the form editor (Form Layout / New -> Text) with HTLM option selected
Pasted the embed code

The form would then display two different timers, with the seconds moving and all.

I do not have the time yet to figure out why (maybe HTML is triggering something) - dinner time here
But maybe you will

Kind regards,

Pierre

Luison Lassala 11/12/2021 1:30:26 PM
Yes, I was able to display the Counter this morning - and modify all its attributes so it looks pretty cool (small and neat: check the post above where I sent @basenine the URL to my form: https://bedrocksuccessie-my.sharepoint.com/:i:/g/personal/luison_bedrocksuccess_ie/EbE7xz8-caxGjMGr4JoSwOcB3WhY561FVDmuKXY5CPqJSw?e=DHcUbw).

What I need now is to replace the fixed Timestamp ("data-dt" value in their API) with a XHTML formula that refers to a field in my database ([Time Max] timestamp)
Pierre 11/12/2021 2:31:05 PM
OK
It worked with the inclusion of
<script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>
in the HTLM text separator

To insert the value you want it is very easy
In your XHTML formula your can insert variables with <%%> separators
Ex
<a data-type="countdown"
data-name="TimeLeft"
data-bg_color="#97B8FF"
data-name_color="#008922"
data-border_color="#888888"
data-dt="<%Format([EndTime],"s")%>"
data-timezone="America/Chicago"
style="display: block; width: 20%; position: relative; padding-bottom: 25%"
class="tickcounter"
href="//www.tickcounter.com"
>Countdown</a>

Kind regards,

Pierre

Luison Lassala 11/12/2021 3:12:48 PM
Unfortunately that XHTML formula keeps giving me an error. I have tried removing some of the symbols (first the <>, then the " ") with no joy.
Then I replaced the 'Format' formula from the code with a Text field, which is the Format([ ], "s") already calculated, in case it makes any difference.
<div data-type="countdown" data-id="<%[Time Max Text])%>" class="tickcounter" style="width: 150px;

Can you see anything wrong with that syntax?
Pierre 11/12/2021 3:23:05 PM
You have an extra closing parenthesis
Change:
data-id="<%[Time Max Text])%>"
To:
data-id="<%[Time Max Text]%>"

basenine 11/12/2021 4:05:58 PM
Nice work guys 👍👍
Luison Lassala 11/12/2021 4:50:38 PM
I wish that was the problem, but it wasn't: I removed the bracket (which I hadn't noticed!) and still getting errors.
This is how it looks if I type the value of the field [Time Max Text] within the " ":
https://bedrocksuccessie-my.sharepoint.com/:i:/g/personal/luison_bedrocksuccess_ie/Ef4c_A1pVslArLDiNRn0TKEBLLlXHnYphvWI58wl5drSqg?e=JZ4eMU

And this is what it looks like if I replace the value with a field reference "<%[Time Max Text]%>":
https://bedrocksuccessie-my.sharepoint.com/:i:/g/personal/luison_bedrocksuccess_ie/ES-dyEmSUgdDjuAPI3lyM0oByucCPwU9MfoRA6XelGC8HA?e=i7CDbZ

This is the HTML code I'm using:
<div data-type="countdown" data-dt="<%[Time Max Text]%>" class="tickcounter" style="width: 100%; position: relative; padding-bottom: 25%"><a href="//www.tickcounter.com/countdown/2874346/assessment-test-completion" title="Assessment Test Completion">Assessment Test Completion</a><a href="//www.tickcounter.com/" title="Countdown">Countdown</a></div><script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>

Looks like this TickCounter app doesn't like TeamDesk's XHTML formulas :(
Sorry to be taking up so much of your time. If you prefer not to continue this thread I will understand: you've been very good to me already.

Luison
Pierre 11/12/2021 5:04:35 PM
Hello Luison

1) I have been learning a lot about this while searching with you for a solution - thank you for sharing it !
2) It works here - so don't lose faith !
3) I feel the issue your are facing is linked with the TimeStamp -> Text Formula conversion
I used : Format([EndTime],"s") which translates for instance a Timestamp (Date & Time) to YYYY-MM-DDTHH:MM (and maybe :SS)
This works with tick counter
Could you either
- build your TimeMaxText field with Format([Time Max],"s")
- or show me the formula you are using for TimeMax Text

The one that works here is:

<a data-type="countdown"
data-name="TimeLeft"
data-bg_color="#97B8FF"
data-name_color="#008922"
data-border_color="#888888"
data-dt="<%Format([EndTime],"s")%>"
data-timezone="America/Chicago"
style="display: block; width: 20%; position: relative; padding-bottom: 25%"
class="tickcounter"
href="//www.tickcounter.com"
>Countdown</a>

Pierre
Luison Lassala 11/12/2021 5:28:37 PM
This is so frustrating! I have replaced the formula field with exactly the same XHTML formula you are using, and now it will not accept the HTML code.

Here is the code I'm using:

<a data-type="countdown"
data-name="TimeLeft"
data-bg_color="#97B8FF"
data-name_color="#008922"
data-border_color="#888888"
data-dt="<%Format([Time Max],"s")%>"
data-timezone="America/Chicago"
style="display: block; width: 20%; position: relative; padding-bottom: 25%"
class="tickcounter"
href="//www.tickcounter.com"
>Countdown</a>
</div><script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>
Pierre 11/13/2021 1:46:33 AM
Hello Luison

I renamed my field to suit yours
In my database:
[Time Max] is a Timestamp field / I have set a value : 15/11/2021 21:29:00

I created a Text Formula Field: [TimeMax Text] = Format([Time Max],"s")
Its value is : 2021-11-15T21:29:00

[CountDown] is a Formula - XHTML field
<a data-type="countdown"
data-name="TimeLeft"
data-bg_color="#97B8FF"
data-name_color="#008922"
data-border_color="#888888"
data-dt="<%Format([Time Max],"s")%>"
data-timezone="America/Chicago"
style="display: block; width: 20%; position: relative; padding-bottom: 25%"
class="tickcounter"
href="//www.tickcounter.com"
>Countdown</a>

And I have in the form, a Text Separator (this is not a field), with the HTML option selected, with the following value:
<script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>

My language & location is French

If you want, I will gladly create a DataBase and invite you there so that you can see for yourself

Pierre




Luison Lassala 11/13/2021 4:59:37 AM
OMG! Pierre, you're so good. There had to be something wrong with the way I was doing it.

I had placed ALL the HTML code into the Text Separator, thinking that TeamDesk would be able to interpret the <%[...]%> container as a XHTML formula. I didn't realise the XHTML formula had to be separated from the script code!
I wish they explained that a bit better in the TD help, for the benefit of those of us not good at HTML coding :)

Anyway, it's working well now - thank you so much for your patience and perseverance with this. Hopefully some other TD developers will get benefit from your contributions (and my ignorance!!)
Pierre 11/13/2021 6:06:19 AM
Hello Luison

This is great news !
I am very happy to have learned with you that you could display timers in TD.

> I didn't realise the XHTML formula had to be separated from the script code!
I am not sure about this. I tried to put everything in XHTLM field, could not make it work so I tried the separation. But maybe it is possible to do.

I wonder about other items one could display in TD using 3rd party plugins (graphs and tables). If you or any other TD user has any experience there I would be happy to learn about it.

Kind regards,

Pierre
Feedback
Back to Search Results