samigo: replacement UI for timed assessments.

Description

This is an enhancement we have had in production at UVA since Feb 2017.

This work replaces the timed assessment timer progress indicator with an updated jQuery UI progress bar based implementation. 

Some restyling of the "Question Progress" box was necessary so the two elements could interact cleanly.

Changes and Features:

  • No longer submits on timer expiration (the server thread handles this) instead we only save the work one final time, and display status as the server thread submits.

  • Stays on screen during take, pins to top of browser when scrolling down.

  • Timer alerts are in the same widget

  • Collapsible

  • AJAX synchronization with timed assessment server thread

  • Enhancements for accessibility with screen readers

    • Informs taker of time limit and hot key "ctrl-alt-t" 

    • Reads time remaining on hotkey press

  • Cleaner styling of the Question Progress box

 

https://youtu.be/4YJ_VJlMlBk - Taken from Samigo

https://youtu.be/ZYVOm5M5mHI - Taken from a link

https://youtu.be/t3W6Rf4ng9U - Taken from lessonbuilder

https://youtu.be/zPQJR_cUKLQ - Taken with mobile screen size

https://youtu.be/BPADkfkNnu8 - ChromeVox screen reading

 

Styling updates for the Question Progress slider included.

From:

          To:

Attachments

6

Activity

Show:

Shawn Foster November 28, 2018 at 5:17 PM

What is the purpose of the #timerBlank div?

Would it make more sense to position the timer below the quiz's title in #delivPageWrapper > #delivAsssessmentWrapper and below the .actionToolbar, like in my mockup below?

David Hutchins October 15, 2018 at 8:29 AM
Edited

This bit of css should resolve that display issue.

David Hutchins October 15, 2018 at 8:09 AM

Yes, that looks wrong, and not at all how it was behaving when I submitted the PR. If you look at the videos in the description you can see how it was working then, and how it should be looking now.

Shawn Foster October 10, 2018 at 1:20 PM

The way the bar blocks content on the page in those screenshots does not look good. It appears to be covering information and buttons too. Is this on purpose, ?

Prabhleen Kaur October 10, 2018 at 12:45 PM
Edited

Works as expected .

Server used : https://trunk-mysql.nightly.sakaiproject.org/portal/site

Browser used : Chrome/Firefox (Windows 10)

Attached snips for both browsers.

 

 

Fixed

Details

Priority

Affects versions

Fix versions

Components

Assignee

Reporter

Labels

Created August 22, 2018 at 9:45 AM
Updated June 30, 2021 at 11:47 AM
Resolved August 31, 2018 at 8:12 PM