Read in the answer content type - implementation

Description

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

Acceptance Criteria

Create new content type for recording/downloading users answer

Status

Assignee

Unassigned

Reporter

Jelena Milinovic

Funding

None

Code reviewer

None

Released

None

Sprint

None

Fix versions

Priority

Medium
Configure