IV - Submitting answers - Implementation of the seekbar

Description

Simulate the editor
Simulate the view

Seek bar

  • Reduce the height of a seek-bar by half ( I think it is 8px today)

  • Add a star at the end of a seek-bar

  • Change indicators on a seek-bar, should be:

  • Outlined circle for unanswered questions (current purple circle)

  • Full circle for answered questions (current purple circle)

  • Arrow for crossroads (current green circle)

  • Dot for information (current blue circle)

Design for the star

  • -If there are no end screens defined - user won't get to see the star in the view.-

  • star-normal.png

  • star-mouse over.png

  • star active ( end screen is showing ).png

Answered question indication

Each time a question gets answered:

  • Change an icon from an outlined circle to a full circle.

  • Show a popup which will say how many questions have been answered so far ( "x answered!" )

  • Play star animation
    See how the star and popup animation should look:

  • When clicking on a star: show end screen. End screen implementation:

Question is considered answered when: ( this is same as today )

  • User selects an alternative/answers and press "Check"

  • User selects an alternative/answers and close the popup or continue the video

Icons

  • Added to a font file

  • Star: e91c

  • Outlined circle: e90d

  • Full circle: e90e

  • Dot: e90e (scale down?)

  • Crossroads: e91d

Acceptance Criteria

Implement changes to existing seek bar
Implement score star in a seek bar

Status

Assignee

Oliver Tacke

Reporter

Jelena Milinovic

Funding

Open Ended in IV

Code reviewer

Frode Petterson

Released

None

Time tracking

10h

Sprint

None

Fix versions

Priority

Medium