1. Existing Date Picker and Due Date display 1.1 In its current implementation throughout the system, date fields (when called “Due Date” or “Start Date” or “End Date”) appear as regular text input box. 1.2 The datepicker widget is built on the jQuery UI default date picker component, which is functional but ugly. 2. Updated Appearance and Datepicker plugin 2.1 In all instances where a datepicker is called, use the “calendar” icon to signify that a datepicker will be triggered (icon can be re-used from existing UI in admin panels). 2.2 The jQuery UI datepicker should be replaced with the DateTimePicker plugin from XDSoft (http://xdsoft.net/jqplugins/datetimepicker/). 2.3 All business rules of existing datepickers should be preserved (e.g. span dependencies, no due dates before today’s date, etc) 3. Time element added to due date fields 3.1 All objects with due dates (writing, review, and revision tasks) should have a “time” component added to the due date. 3.2 Time can be added to the XDSoft plugin by configuring the variables. 3.3 By default, all due date fields should be set to 11:59pm of the current day, based on the time zone settings for the course. 3.4 A due date should never be set to a date and time less than the present time. 3.5 All “Due Date” fields should remind the instructor of the course timezone and, in the event that students have different timezones set, offer the instructor a link to display what the time zone differences might mean for students; clicking the link opens 3.6. 3.6 Modal window displays a table with all of students who live in a timezone other than the one in which the course is based. Table displays both the timezone on the student account as well as the difference between the student’s timezone and the course. These displays document the current datepicker element used in Eli Review and introduce a replacement datepicker and how it should be implemented. 1.0 2014-04-13 11:59pm Due Date Course time zone: SGT / Singapore Time (3 students in different time zones) 2014-04-13 11:59pm Due Date Course time zone: SGT / Singapore Time (3 students in different time zones) 2014-04-13 Start Date 2014-04-13 Start Date 2.0 3.0 Student Time Zones These students live outside of the course’s specified time zone: -3 hours (5:33 am) -3 hours (5:33 am) Difference -1 hour (7:33 am) Pacific Standard Time Pacific Standard Time Time Zone Central Standard Time Vigneault, Kate Moy,. Todd Muñoz, Elliott Name 3.6 Eli Review - UI Updates for Task Deadlines and Timezone Settings [1] - New Datepicker with Time Elements Page 1 of 12
Transcript
1. Existing Date Picker and Due Date display1.1 In its current implementation throughout the system, date fields (when called “Due Date”
or “Start Date” or “End Date”) appear as regular text input box.1.2 The datepicker widget is built on the jQuery UI default date picker component, which is
functional but ugly.
2. Updated Appearance and Datepicker plugin2.1 In all instances where a datepicker is called, use the “calendar” icon to signify that a
datepicker will be triggered (icon can be re-used from existing UI in admin panels).2.2 The jQuery UI datepicker should be replaced with the DateTimePicker plugin from
XDSoft (http://xdsoft.net/jqplugins/datetimepicker/).2.3 All business rules of existing datepickers should be preserved (e.g. span dependencies,
no due dates before today’s date, etc) 3. Time element added to due date fields3.1 All objects with due dates (writing, review, and revision tasks) should have a “time”
component added to the due date.3.2 Time can be added to the XDSoft plugin by configuring the variables.3.3 By default, all due date fields should be set to 11:59pm of the current day, based on
the time zone settings for the course.3.4 A due date should never be set to a date and time less than the present time.3.5 All “Due Date” fields should remind the instructor of the course timezone and, in the
event that students have different timezones set, offer the instructor a link to display what the time zone differences might mean for students; clicking the link opens 3.6.
3.6 Modal window displays a table with all of students who live in a timezone other than the one in which the course is based. Table displays both the timezone on the student account as well as the difference between the student’s timezone and the course.
These displays document the current datepicker element used in Eli Review and introduce a replacement datepicker and how it should be implemented.
1.0
2014-04-13 11:59pmDue Date
Course time zone: SGT / Singapore Time (3 students in different time zones)
2014-04-13 11:59pmDue Date
Course time zone: SGT / Singapore Time (3 students in different time zones)
2014-04-13Start Date 2014-04-13Start Date
2.0
3.0
Student Time Zones
These students live outside of the course’s specified time zone:
-3 hours (5:33 am)
-3 hours (5:33 am)
Difference
-1 hour (7:33 am)
Pacific Standard Time
Pacific Standard Time
Time Zone
Central Standard Time
Vigneault, Kate
Moy,. Todd
Muñoz, Elliott
Name
3.6
Eli Review - UI Updates for Task Deadlines and Timezone Settings[1] - New Datepicker with Time Elements
1. Updates to “Time Zone” option in Sign Up form1.1 Existing Time Zone dropdown only lists four options (continental US).1.2 Dropdown options list timezone first and time last.1.3 Updated dropdown should make all global timezones available.1.4 Updated dropdown choices should list time first, and include the current date, as well as
the full name of the time zone (e.g. “Eastern Standard Time” instead of “Eastern”)1.5 By default, the time zone should be selected that is the best guess for the user’s
location based on data gathered about the user. The browser should attempt to identify the user’s time zone based on a factor like IP address via service like http://worldtime.io/api and select that time zone by default, to keep the user from having to select. If the guess is wrong, the user can update manually.
2. Updates to “Time Zone” option in Account Settings2.1 Existing Time Zone displays just a single word representation of the timezone.2.2 Existing dropdown replicates problems of 1.2.2.3 Updated dropdown include all options (same as 1.3).2.4 Updated dropdown choices should have time and date included (just like 1.4)2.5 Field label should reflect new consistent usage (“Time Zone” rather than “Timezone”)
These mockups represent changes to the existing interface elements in account creation and in the user’s account settings.
1.0
Current: https://app.elireview.com/index/create
something1
10:29 am - 02/13 - Central Standard Time
09:29 am - 02/13 - Mountain Standard Time
08:29 am - 02/13 - Pacific Standard Time
Repeat for all time zones
11:29 am - 02/13 - Eastern Standard TimeTime Zone
Transformed - time, with date, all time zones
2.0
Transformed: new language in selected zone, must save properly
11:29 am - 02/13 - Eastern Standard TimeTime Zone: Save
Time Zone: EditEastern Standard Time (11:29 am - 02/13/2015)
Current: https://app.elireview.com/user
Eli Review - UI Updates for Task Deadlines and Timezone Settings[2] - All Users - Signup - Account Settings
1. Updates to existing Course Creation form1.1 Current Time Zone dropdown has same problems as account creation (see [2]).1.2 Update Time Zone dropdown to have all options and new text (see [2]).1.3 Update Start Date and End Date fields (not pictured) to use new datepicker (see [1]) -
be sure to preserve date range business rules (no Start Date earlier than “today,” no End Date earlier than Start Date, set 6-month default for End Date). Potential New Rule: start date should be 12:00am and end date should be at 11:59pm in the time zone specified when the course is created.
1.4 By default, the time zone should be selected that matches the time zone specified by the user when their account was created. If, for some reason, the user has not defined a time zone, set the course to US Eastern Standard Time (EST), and save the user’s selection as their default location in their account.
2. Updates to existing Course Settings form2.1 Existing time zone dropdown replicates previously diagnosed problems.2.2 Update visual design of the form to represent all other forms throughout the app.2.3 Update Start Date and End Date fields to use new datepicker - implement same
business rules as outlined in 1.3.2.4 Update Time Zone dropdown with previous changes documented in [2].
These mockups represent needed changes to the time zone selection when creating a course as well as the settings for updating the time zone on an existing course.
1.0
something1
10:29 am - 02/13 - Central Standard Time
09:29 am - 02/13 - Mountain Standard Time
08:29 am - 02/13 - Pacific Standard Time
Repeat for all time zones
11:29 am - 02/13 - Eastern Standard TimeTime Zone
Transformed - time, with date, all time zones, auto-selecthttps://app.elireview.com/unit/index/module-create
1. Updates to Dashboard functionality1.1 All tables should be sorted by “End Date” (and now time) in ascending order.1.2 All dashboards affected - both instructor and student, and both active and inactive.
These are very minor updates to the way time is handled in the dashboards for both instructors and students.
1.0
https://app.elireview.com/unit
Eli Review - UI Updates for Task Deadlines and Timezone Settings[4] - Dashboards - Instructor and Student
1. Updates to “Create Writing Task” and “Task Details”1.1 In the “Create Writing Task” interface, update the “Due Date” component to reflect the
new due date UI and business rules (see [1]).1.2 In the “Writing Task Details” interface, update the “Due Date” component to reflect the
new due date UI and business rules (see [1])
2. Updates to “Submission Details” 2.1 In the “Date Submitted” field, update the existing date display to include time (2.2).2.2 In the improved “Date Submitted” field, change the date from a textual value to numeric
(MM/DD/YYY) and include the time of submission (translated to the course’s time zone). Preserve the business rules for formatting a message about earliness and lateness to help instructor see student performance).
These mockups document the current implementation of dates in the Create Writing Task display as well as the detail views for an existing writing task and individual student submissions.
1. Updates to Existing Interface1.1 In the “Task Details” section that displays the assigned due date, the display should be
updated to change the textual date to numerical (MM/DD/YYYY) and to include the time, translated from the course default to the student’s specified time zone (based on their account settings). The business rules of the time warnings should be updated - if the due date is in the future, display remaining time (in orange); if the due date has passed with no submission, change to “officially late” (in red); if there is a submission, do not show a warning.
1.2 In the “Your Submission” section, change the date in the “Task Submitted” field to have a numerical value (MM/DD/YYY) and add the time of the submission (based on the time in the student’s time zone).
This display details the changes needed to the student writing task interfaces, both for submitting a writing task and for viewing their submission.
1. Updates to Existing Functionality1.1 In the “Create Revision Task” display, update the “Due Date” fields for both Revision
Plans and Revise and Resubmit tasks to reflect new business and UI rules (see [1]).1.2 In the “Task Details” display, change due dates (when editing) to reflect new business
and UI rules (see [1]). When not being edited, change date displays to be numerical values (MM/DD/YYY) and add the time.
These displays refer to changes needed to the instructor interfaces for creating revision tasks.
1. Updates to Existing Functionality1.1 In the “Due Date” field for an unshared revision plan, the due date should be made
numerical (MM/DD/YYY) and the time of the assignment should be included.1.2 In the completed view of this task, the “Shared with instructor” text should change the
date to numerical (MM/DD/YYY) and the time should be included.
These displays represent changes needed to the student display for a revision plan.
1. Updates to Existing Functionality1.1 On the instructor course homepage, the table remain sorted first by tasks in descending
order. Add the time element to this sorting, but leave it hidden in this display. If a task does not have a due date (e.g. if it is saved as a draft) make it be at the top of the table (or at the bottom of the list when sorted in descending order).
1.2 On the student course homepage, the table should remain sorted by tasks in ascending order (tasks due first are displayed first) but add time to that sorting. Do not display the time, though, only make it a variable when sorting (so that tasks due on the same day are still properly ordered).
These displays represent needed changes to the course homepage for both instructors and students to support the addition of time to task due dates.
