Create stopwatch question

[grassick]

Create a question type that returns a number of seconds elapsed. Nice big display with Start/Stop and Pause/Clear buttons. Initially blank.

Timer or stopwatch question that automatically enters the elapsed time as the survey result

[grassick]

Stopwatch question. Of type number result.+

[grassick]

Also add edit (manual edit) capability. Only store the value once the stopwatch is stopped. Use bootstrap buttons for a consistent look and a big digital display with 1/10 second accuracy.

[grassick]

StopwatchQuestion

[grassick]

Also add to schemaDesign.coffee which is the JSON schema

[grassick]

@daxfohl Hi Dax,

John and Annie reviewed it, and they want a much more stopwatch-y look. So lets do the following:

• make display 00:00 style, dropping fractional seconds (but still store one decimal under the covers. Use floor, not round for conversion)
• get rid of edit option. It was deemed too uncommonly used to outweigh the extra visual complexity for low-literacy users
• Get rid of grey background and extra padding. Just make it a big bold font.

Also, there is a strange flicker to -.- when clicking start again. Probably a state bug.

[daxfohl]

@grassick If it's going to be used entirely on mobile, should it launch full-screen when it's running, so it's like a real stopwatch app, or does it need to stay within the position on the form?

[grassick]

All other controls are within the form, so let's keep it there.

[daxfohl]

@grassick re store as one decimal: seems a bit odd, presenting in mm:ss.s, but storing in ss.s; seems like we should either store in mm:ss.s (if presentation is important in storage) or simply in ticks otherwise. Storing in ss.s seems neither here nor there.

re flicker: the reason is because clicking stopwatch "Start" calls onValueChange(null), to invalidate any existing value. Somewhere there's a cycle that ends up invoking its componentWillReceiveProps with the null value, which causes the flicker. So, I could either (a) not have "Start" invalidate the existing value, (b) ignore componentWillReceiveProps when nextProps.value is null, or (c) ignore componentWillReceiveProps when timer is active. Which fits in better with how the higher-level is constructed? Or (d) is the cycle itself a higher-level bug?

[grassick]

@daxfohl You're right, let's just store seconds. It's a database manipulable value, so ticks or mm:ss.ss is a no-no.

As for the flicker, you can pass a function to the second parameter of setState that will be executed when the state transition is complete. You could only null it then once the state transition was done and get no flicker.

[grassick]

Actually, I notice that you're not setting elapsedTime to 0 when Start is clicked. That's probably what's causing the flicker as it waits until the next tick.

[daxfohl]

@grassick issues fixed, and monospace so it looks more like a timer.

[grassick]

@daxfohl I'm afraid that the tests all fail on my machine, both in testem and karma.

records after [start, ticks, stop] ‣
AssertionError: expected 1.23 to equal 1.2

records [start, ticks, stop, edit, save] ‣
TypeError: Cannot read property 'tagName' of undefined

ignores [start, ticks, stop, edit, cancel] ‣
TypeError: Cannot read property 'tagName' of undefined