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.
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
Create new content type for recording/downloading users answer