Project

General

Profile

Feature #5043

Show timer red when only one minute left

Added by Yannick Warnier about 7 years ago. Updated about 7 years ago.

Status:
Feature implemented
Priority:
Normal
Assignee:
Category:
-
Target version:
Start date:
25/06/2012
Due date:
27/07/2012
% Done:

100%

Estimated time:
Spent time:
Complexity:
Normal
SCRUM pts - complexity:
?

Description

Users generally don't catch the fact that the time they have left in the exercises is less than one minute. By making the counter background orange or red, we could attract the user's attention on this.


Files

counter.png (11 KB) counter.png Julio Montoya, 03/07/2012 15:40
epiclock_minuteRenderer.zip (87.9 KB) epiclock_minuteRenderer.zip Marko Kastelic, 22/07/2012 22:31
timer_red_epiclock3.patch (103 KB) timer_red_epiclock3.patch Marko Kastelic, 23/07/2012 09:14

Associated revisions

Revision 3496cbee (diff)
Added by Julio Montoya about 7 years ago

Exericses: Changing timer color see #5043

Revision ad3bb309 (diff)
Added by Julio Montoya about 7 years ago

Adding epiclock 3 + a render to change the colors see #5043

Revision 48e8bb25 (diff)
Added by Julio Montoya about 7 years ago

Including epiclock js library + deleting the old js library see #5043

Revision c09eded2 (diff)
Added by Julio Montoya about 7 years ago

Changing classes and values in the render see #5043

History

#1

Updated by Yannick Warnier about 7 years ago

This probably involves writing a new renderer for jquery.epiclock: http://code.google.com/p/epiclock/wiki/Rendering

#2

Updated by Yannick Warnier about 7 years ago

  • Assignee changed from Yannick Warnier to Julio Montoya
#3

Updated by Julio Montoya about 7 years ago

  • File counter.png counter.png added
  • Status changed from Assigned to Needs more info
  • Assignee deleted (Julio Montoya)

In fact you can just change the CSS, the class is #time_container in base.css

#4

Updated by Yannick Warnier about 7 years ago

  • Status changed from Needs more info to Assigned
  • Assignee set to Julio Montoya

Yes, but the idea is to change it only when the time is <= 60 seconds, to attract attention.

#5

Updated by Julio Montoya about 7 years ago

I just read the first part :D "Show timer red"

#6

Updated by Yannick Warnier about 7 years ago

I know :-p
Although I'm sometimes very fluent in my task details, every word is generally important :-)

#7

Updated by Julio Montoya about 7 years ago

  • Status changed from Assigned to Needs more info
  • Assignee deleted (Julio Montoya)

well this will take more time as I expected, we currently have the version 2 of epiclock, the code you showed is from version 3, version 2 is not very well documented, yesterday I took some time trying to do that with no success.

#8

Updated by Marko Kastelic about 7 years ago

i think i have a very near code for this issue. Code is more than a year old on top of epiclock 3. will post the code in a day or two.

#9

Updated by Yannick Warnier about 7 years ago

Hi Marko,
If you manage to do that before then, that will probably be very useful (I'd like to close all the "Features" issues during the week-end)

#10

Updated by Yannick Warnier about 7 years ago

  • Target version changed from 1.9 RC1 to 1.9 Stable
#11

Updated by Marko Kastelic about 7 years ago

sorry, i almost forgot.
my old sources were not useful (i changed the code of epiclock but this is inadmissible for this project) so i put together a simple renderer (just for background change). Demo is attached, run index from root. Since i cannot find other option, i have to calculate a time difference on every single rendering and that can result in little premature or late backgroud appearing. Difference is smaller than a half of clock tick (250ms).

#12

Updated by Marko Kastelic about 7 years ago

and patch (need to be cleaned-up, ...
- epiclock upgraded to 3.0-fix (latest)
- renderer 'minute' for red background when under 1 minute

#13

Updated by Yannick Warnier about 7 years ago

  • Due date set to 27/07/2012
  • Status changed from Needs more info to Assigned
  • Assignee set to Julio Montoya

Cowardly assigning to Julio :-)

#14

Updated by Julio Montoya about 7 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Julio Montoya)
  • % Done changed from 0 to 80

Code added

#15

Updated by Julio Montoya about 7 years ago

I forgot to say that it works well: < 1 minute the color is yellow and then < 30s the background is red

#16

Updated by Yannick Warnier about 7 years ago

I would rather put 3 minutes yellow and 1 minute red, but let me test that first :-)

#17

Updated by Yannick Warnier about 7 years ago

You know, that's the kind of improvements that I can take in a demo and all the assistants say "Whoooooooo" :-)

It works great!

Just a few changes:
  • make the timer orange at 3 minutes and red at 1 minute (30 seconds is too short if you have a 1h exam)
  • change the red to something brighter (#FB3A35 ?)

Once done, you can close. I'm very happy about this one.

#18

Updated by Yannick Warnier about 7 years ago

I would recall under_minute to time_warning1 and under_30_seconds to time_warning2

#19

Updated by Julio Montoya about 7 years ago

I updated the render

#20

Updated by Yannick Warnier about 7 years ago

I think your last push didn't pass.

#21

Updated by Yannick Warnier about 7 years ago

  • Status changed from Needs testing to Feature implemented
  • Assignee set to Julio Montoya
  • % Done changed from 80 to 100

This is great. Just great.
Thanks guys.

Also available in: Atom PDF