Only give user n seconds to answer question

[kanerogers]

Background

Now let's make it interesting. The user has to answer the question in a limited number of seconds, or else.

TODO

• [x] Start with a hardcoded limit of 10 seconds
• [x] Display the number of seconds left
• [x] Have the number of seconds left get updated
• [x] When the timer hits zero, tell the user they ran out of time
• [x] Allow the user to set a custom time duration

Emergent Issues (Alexatron)

• [x] Need to insulate \<CountDown /> from state changes... => Try changing dependencies to timeRem
• [x] Fix program logic in \<Quiz> according to proposal below
• [x] Prevent the timer from continuing to count down after the question has been answered
• [x] Freeze the \<Guess> field value from changing once checkedAnswer || timeUp
• [x] Fix inability to backspace to empty field in custom timeLimit
• [ ] 1 second lag between (1) CountDown completing and displaying the answer (2) time remaining on frozen \<Guess>
• [ ] Fix the CountDown display jumping from 10 to 8 seconds (appears to be about 2 seconds but need to check exact times)

[forginater]

Update

Hey, mangosteen. I got a buggy as fuck version of issue11 implemented.... (Emergent issues) are outlined above which I'm working through atm.

Based on the specifications, there are a few ways I could implement the control flow.

• Whether user has multiple attempts at a question before time elapses or can only click "Check Answer" once.
• Once time has elapsed and outcome (Incorrect or Correct) has been displayed, can they keep guessing despite having Incorrect recorded in total score.

Proposed Program Logic

• done = answerChecked || timeUp
• if (done) => run timer & render guessfield
• else => display result, stop timer & freeze guessfield (maintain visible but can't change input field)

[forginater]

I chose to store "timeUp" & "answerChecked" in the local variable "done" as they have the same boolean logic with respect to the quiz control flow. From what I read online, with data entirely derived from state, just store it in a local variable. I figured there are other modes and ways this could be configured where the logic of "timeUp" and "answerChecked" may diverge. Not sure if this is the best way to do things!?

You mentioned using naive solutions: So I just wrote an extra component \<CountDownFrozen> rather than passing in a onChange={doNothing} function to the preexisting \<GuessFrozen> when (done is true). Using one component for the input field and using multiple onChange() functions for different scenarios passed in through props seems more elegant and uses less lines of code but I was tired and being lazy with typescript. Lemme know if this is a bad habit to adopt though.