Read in the answer content type - implementation

Behavior

Screen 1 ( starting-screen )

• Learner gets a question.

• Status bar text: "Press a button below to record your answer"

• Rec. counter set on "00:00".

• By pressing "Record Answer" button - learner gets to confirm mic usage ( Screen 2 )

Screen 2 ( mic-allow )

• Show standard browser popup to allow mic usage.

• While popup is active: status bar text "Waiting for the microphone..."

• If the learner allow mic usage - recording process will start. ( Screen 3 )

• If the learner block mic usage - Status bar text changes to: "Microphone is blocked. Check the browser settings to allow microphone usage.", counter and record button are hidden.

Screen 3 ( recording process )

• Status bar changes to "Recording..."

• Rec. counter starts counting

• Buttons change to "Pause" and "Finish"

• Implement mic volume-meter at the top (vu-meter.svg)

Screen 4 ( recording paused )

• Change status bar to "Recording paused". Press a button to continue recording.

• Change "Pause" button to "Continue"

• Rec. counter stops

• If "Continue" is selected - Screen 4

• If "Finish" is selected - Screen 5

Screen 5 ( recording finished )

• Status bar is changed to "You have successfully recorded your answer! Listen to the recording below."

• Learner is able to reproduce recording by pressing play.

• ( Replace "Play" with "Pause" when playing )

• Show progress/recoriding length at the right part of the player

• Download and retry buttons are shown below player.

• Download should download the recording.

• On "Retry" - Screen 6

Screen 6 ( retry confirmation screen )

• Show standard popup for retry confirmation.

Stylings

Padding: 1.750 em
Icon: fa-microphone []
Icon container: 9.375 em x 9.375 em
Question: font size: 1.875em, font color: #000000
Status bar: height: 3.750em, default-background #f8f8f8, background while recording: #f9e5e6, background when finished: #e0f9e3.
Status bar text: font size: 1.250em, default-font-color: #777777, color while recording: #da5254, color when finished: #20603d.
Rec. counter: font size: 2500em, font color: #8f8f8f, padding-top and bottom: 2.813 em

Buttons:
All buttons: font size: 1.563em, padding 1.250em
"Record answer" and "Continue": font color: #ffffff, background: #d95354
"Pause": font color: #d95354, background: #ffffff, border: 0.125em #d95354
"Download": background: #1f824c, font color: #ffffff
"Finish" and "Retry": background: #5e5e5e, font color: #ffffff