Skip to content

E
edx-ora2
Commit 7e476f4f by ssemenova
Options

ORA expanding/collapsing steps accessibility 

TNL-4001
parent 558ff91d
Showing with 846 additions and 587 deletions
openassessment/templates/openassessmentblock/edit/oa_edit.html
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
</div> </div>
<div id="openassessment_validation_alert" class="covered"> <div id="openassessment_validation_alert" class="covered">
<i class="openassessment_alert_icon"></i> <span class="openassessment_alert_icon" aria-hidden="true"></span>
<div class="openassessment_alert_header"> <div class="openassessment_alert_header">
<h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2> <h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>
<p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix the areas highlighted in red." %}</p> <p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix the areas highlighted in red." %}</p>
</div> </div>
<a href="" rel="view" class="action openassessment_alert_close"> <a href="" rel="view" class="action openassessment_alert_close">
<i class="icon fa fa-times-circle" aria-hidden="true"></i> <span class="icon fa fa-times-circle" aria-hidden="true"></span>
<span class="label is--hidden">{% trans "close alert" %}</span> <span class="label is--hidden">{% trans "close alert" %}</span>
</a> </a>
</div> </div>
......
openassessment/templates/openassessmentblock/grade/oa_assessment_title.html
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
{% if assessment.option.explanation %} {% if assessment.option.explanation %}
<span class="ui-hint hint--top" data-hint="{{ assessment.option.explanation }}"> <span class="ui-hint hint--top" data-hint="{{ assessment.option.explanation }}">
<i class="icon fa fa-info-circle" aria-hidden="true" <span class="icon fa fa-info-circle" aria-hidden="true"
title="{% blocktrans with name=assessment.option.label %}More information about {{ name }}{% endblocktrans %}"> title="{% blocktrans with name=assessment.option.label %}More information about {{ name }}{% endblocktrans %}">
</i> </span>
</span> </span>
{% endif %} {% endif %}
......
openassessment/templates/openassessmentblock/grade/oa_grade_cancelled.html
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade has--error"> <li id="openassessment__grade" class="openassessment__steps__step step--grade has--error ui-slidable__container" tabindex="-1">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="step__label">{% trans "Your Grade" %}: </span> <span class="wrapper--copy">
<span class="grade__value"> <span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value__title"> <span class="grade__value">
{% if score %} <span class="grade__value__title">
{% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %} {% if score %}
{% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %} {% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
{{ points_earned }} out of {{ points_possible }} {% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
{% endblocktrans %} {{ points_earned }} out of {{ points_possible }}
{% endwith %} {% endblocktrans %}
{% else %} {% endwith %}
<!--When submission is cancelled right after the response submitted, the score would be 0.--> {% else %}
0 <!--When submission is cancelled right after the response submitted, the score would be 0.-->
{% endif %} 0
{% endif %}
</span>
</span> </span>
</span> </span>
</span> </button>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" id="oa_grade_{{ xblock_id }}_content" aria-labelledby="oa_grade_{{ xblock_id }}">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<div class="grade__value__description"> <div class="grade__value__description">
......
openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade"> <li id="openassessment__grade" class="openassessment__steps__step step--grade is--unfinished ui-slidable__container" tabindex="-1">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}">
<span class="step__label">{% trans "Your Grade" %}: </span> <span class="wrapper--copy">
<span class="grade__value"> <span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value__title">{% trans "Not Completed" %}</span> <span class="grade__value">
<span class="grade__value__title">{% trans "Not Completed" %}</span>
</span>
</span> </span>
</span> </button>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<div class="grade__value__description"> <div class="grade__value__description">
......
openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted"> <li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted ui-slidable__container" tabindex="-1">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="step__label">{% trans "Your Grade" %}:</span> <span class="wrapper--copy">
<span class="grade__value"> <span class="step__label">{% trans "Your Grade" %}:</span>
<span class="grade__value__title">{% trans "Not Started" %}</span> <span class="grade__value">
<span class="grade__value__title">{% trans "Not Started" %}</span>
</span>
</span> </span>
</span> </button>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<div class="grade__value__description"> <div class="grade__value__description">
......
openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade"> <li id="openassessment__grade" class="openassessment__steps__step step--grade is--showing {{ is_waiting_staff }} ui-slidable__container" tabindex="-1">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="step__label">{% trans "Your Grade" %}:</span> <span class="wrapper--copy">
<span class="grade__value"> <span class="step__label">{% trans "Your Grade" %}:</span>
<span class="grade__value__title">{% trans "Waiting for Assessments" %}</span> <span class="grade__value">
<span class="grade__value__title">{% trans "Waiting for Assessments" %}</span>
</span>
</span> </span>
</span> </button>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<div class="grade__value__description"> <div class="grade__value__description">
......
openassessment/templates/openassessmentblock/leaderboard/oa_leaderboard_show.html
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard is--complete {% if allow_latex %} allow--latex{% endif %}"> <li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard is--complete ui-slidable__container is--showing {% if allow_latex %} allow--latex{% endif %}" tabindex="-1">
<header class="step__header"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="true" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
<span class="step__label">{% trans "Top Responses" %} </span> <span class="wrapper--copy">
<div class="wrapper--step__content"> <span class="step__label">{% trans "Top Responses" %} </span>
<h3 class="leaderboard__title">{% trans "Top-Scoring Responses for This Assignment" %}</h3> </span>
<ol class="list leaderboard__score__list"> </button>
{% for topscore in topscores %}
<li class="leaderboard__score__item">
<h4 class="leaderboard__list__number">{{ forloop.counter }}</h4>
{% with num_points=topscore.score %}
<h4 class="leaderboard__score__title">
{% blocktrans %}{{ num_points }} points{% endblocktrans %}
</h4>
{% endwith %}
<div class="leaderboard__answer">
{% trans "Your peer's response to the question above:" as translated_label %}
{% include "openassessmentblock/oa_submission_answer.html" with answer=topscore.submission.answer answer_text_label=translated_label %}
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=topscore.file class_prefix="submission__answer"%}
</div>
</li>
{% endfor %}
</ol>
</div>
</span>
</h2> </h2>
</header> </header>
<div class="wrapper--step__content ui-slidable__content" aria-labelledby="oa_leaderboard_{{ xblock_id }}" id="oa_leaderboard_{{ xblock_id }}_content">
<h3 class="leaderboard__title">{% trans "Top-Scoring Responses for This Assignment" %}</h3>
<ol class="list leaderboard__score__list">
{% for topscore in topscores %}
<li class="leaderboard__score__item">
<h4 class="leaderboard__list__number">{{ forloop.counter }}</h4>
{% with num_points=topscore.score %}
<h4 class="leaderboard__score__title">
{% blocktrans %}{{ num_points }} points{% endblocktrans %}
</h4>
{% endwith %}
<div class="leaderboard__answer">
{% trans "Your peer's response to the question above:" as translated_label %}
{% include "openassessmentblock/oa_submission_answer.html" with answer=topscore.submission.answer answer_text_label=translated_label %}
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=topscore.file class_prefix="submission__answer"%}
</div>
</li>
{% endfor %}
</ol>
</div>
</li> </li>
{% endspaceless %} {% endspaceless %}
openassessment/templates/openassessmentblock/leaderboard/oa_leaderboard_waiting.html
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard"> <li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard ui-slidable__container" tabindex="-1">
<header class="step__header"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="false" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
<span class="step__label">{% trans "Top Responses" %} </span> <span class="wrapper--copy">
</span> <span class="step__label">{% trans "Top Responses" %} </span>
</span>
</button>
</h2> </h2>
</header> </header>
<div class="wrapper--step__content"> <div class="wrapper--step__content ui-slidable__content" aria-labelledby="oa_leaderboard_{{ xblock_id }}" id="oa_leaderboard_{{ xblock_id }}_content">
<div class="step__content"> <div class="step__content">
<div class="leaderboard__description"> <div class="leaderboard__description">
<p>{% trans "After you complete all the steps of this assignment, you can see the top-scoring responses from your peers." %}</p> <p>{% trans "After you complete all the steps of this assignment, you can see the top-scoring responses from your peers." %}</p>
......
openassessment/templates/openassessmentblock/oa_base.html
...@@ -24,16 +24,15 @@ ...@@ -24,16 +24,15 @@
<span class="wrapper--copy"> <span class="wrapper--copy">
<span class="step__label">{% trans assessment.title %}</span> <span class="step__label">{% trans assessment.title %}</span>
</span> </span>
</h2>
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status:" %}</span> <span class="step__status__label">{% trans "This step's status:" %}</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-spinner fa-spin" aria-hidden="true"></i> <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
<span class="copy">{% trans "Loading" %}</span> <span class="copy">{% trans "Loading" %}</span>
</span>
</span> </span>
</span> </h2>
</header> </header>
</li> </li>
{% endfor %} {% endfor %}
......
openassessment/templates/openassessmentblock/oa_rubric.html
...@@ -5,16 +5,18 @@ ...@@ -5,16 +5,18 @@
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
<li <li
class="field field--radio is--required assessment__rubric__question ui-toggle-visibility {% if criterion.options %}has--options{% endif %}" class="field field--radio is--required assessment__rubric__question is--showing ui-slidable__container {% if criterion.options %}has--options{% endif %}"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}" id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"
> >
<h4 class="question__title ui-toggle-visibility__control"> <h4 class="question__title ui-slidable__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <button class="ui-slidable" aria-expanded="true" id="oa_rubric_{{ submission.uuid }}" aria-controls="oa_rubric_{{ submission.uuid }}_content">
<span id="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span class="label--required sr">* ({% trans "Required" %})</span> <span id="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" class="ui-slidable__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</button>
</h4> </h4>
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_rubric_{{ submission.uuid }}" id="oa_rubric_{{ submission.uuid }}_content">
<div class="question__answers"> <div class="question__answers">
<div role="group" aria-labelledby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}"> <div role="group" aria-labelledby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}">
{% for option in criterion.options %} {% for option in criterion.options %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -3,49 +3,54 @@ ...@@ -3,49 +3,54 @@
{% block list_item %} {% block list_item %}
<li <li
id="openassessment__peer-assessment" id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment ui-toggle-visibility {% if allow_latex %} allow--latex {%endif%}" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container {% if allow_latex %} allow--latex {%endif%}"
data-submission-uuid="{{ peer_submission.uuid }}" data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1"
> >
{% endblock %} {% endblock %}
{% spaceless %} {% spaceless %}
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> {% block button %}
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer{{ xblock_id }}_content">
<span class="step__label">{% trans "Assess Peers" %}</span> {% endblock %}
{% if peer_start %} <span class="step__counter"></span>
<span class="step__deadline"> <span class="wrapper--copy">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #} <span class="step__label">{% trans "Assess Peers" %}</span>
{% blocktrans with start_date=peer_start|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %} {% if peer_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=peer_start|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% elif peer_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=peer_due|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% endif %}
</span> </span>
{% elif peer_due %} </button>
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #} {% block title %}
{% blocktrans with due_date=peer_due|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %} <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
In Progress ({{ num_graded }} of {{ num_must_grade }})
{% endblocktrans %}
{% endwith %}
</span> </span>
{% endif %} </span>
</span> </span>
{% endblock %}
</h2> </h2>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
In Progress ({{ num_graded }} of {{ num_must_grade }})
{% endblocktrans %}
{% endwith %}
</span>
</span>
</span>
{% endblock %}
</header> </header>
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__instruction"> <div class="step__instruction">
<p>{% trans "Read and assess the following response from one of your peers." %}</p> <p>{% trans "Read and assess the following response from one of your peers." %}</p>
...@@ -82,7 +87,7 @@ ...@@ -82,7 +87,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3> <h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
......
openassessment/templates/openassessmentblock/peer/oa_peer_cancelled.html
...@@ -4,14 +4,18 @@ ...@@ -4,14 +4,18 @@
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy"> <span class="copy">
{% trans "Cancelled" %} {% trans "Cancelled" %}
</span> </span>
......
openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--showing is--incomplete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -10,7 +14,7 @@ ...@@ -10,7 +14,7 @@
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy"> <span class="copy">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %} {% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %} {% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
Incomplete ({{ num_graded }} of {{ num_must_grade }}) Incomplete ({{ num_graded }} of {{ num_must_grade }})
...@@ -22,7 +26,7 @@ ...@@ -22,7 +26,7 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
<h3 class="message__title">{% trans "The Due Date for This Step Has Passed" %}</h3> <h3 class="message__title">{% trans "The Due Date for This Step Has Passed" %}</h3>
......
openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--empty is--complete is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container" tabindex="-1">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy"> <span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> {% trans "Completed" %} <span class="step__status__value--completed">{{ graded }}</span> {% trans "Completed" %}
</span> </span>
...@@ -17,8 +17,12 @@ ...@@ -17,8 +17,12 @@
</span> </span>
{% endblock %} {% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--complete"> <div class="step__message message message--complete">
...@@ -27,7 +31,7 @@ ...@@ -27,7 +31,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not retrieve additional submissions for assessment" %}</h3> <h3 class="message__title">{% trans "We could not retrieve additional submissions for assessment" %}</h3>
</div> </div>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
...@@ -4,16 +4,22 @@ ...@@ -4,16 +4,22 @@
{% block list_item %} {% block list_item %}
<li <li
id="openassessment__peer-assessment" id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete" class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container"
data-submission-uuid="{{ peer_submission.uuid }}" data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1"
> >
{% endblock %} {% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy"> <span class="copy">
{% with graded_string=graded|stringformat:"s" %} {% with graded_string=graded|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %} {% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %}
...@@ -26,7 +32,7 @@ ...@@ -26,7 +32,7 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--complete"> <div class="step__message message message--complete">
...@@ -66,7 +72,7 @@ ...@@ -66,7 +72,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3> <h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
</div> </div>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html
...@@ -2,14 +2,18 @@ ...@@ -2,14 +2,18 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--showing is--complete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy"> <span class="copy">
{% with graded_string=graded|stringformat:"s" %} {% with graded_string=graded|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %} {% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %}
...@@ -22,7 +26,7 @@ ...@@ -22,7 +26,7 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--complete"> <div class="step__message message message--complete">
......
openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -21,7 +26,7 @@ ...@@ -21,7 +26,7 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -2,40 +2,45 @@ ...@@ -2,40 +2,45 @@
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response"
class="openassessment__steps__step step--response is--showing ui-slidable__container"
tabindex="-1">
{% endblock %} {% endblock %}
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> {% block button %}
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
<span class="step__label">{% trans "Your Response" %}</span> {% endblock %}
{% if submission_start %} <span class="step__counter"></span>
<span class="step__deadline"> <span class="wrapper--copy">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #} <span class="step__label">{% trans "Your Response" %}</span>
{% blocktrans with start_date=submission_start|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %} {% if submission_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=submission_start|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% elif submission_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=submission_due|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
{% endif %}
</span> </span>
{% elif submission_due %} </button>
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #} {% block title %}
{% blocktrans with due_date=submission_due|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %} <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span> </span>
{% endif %}
</span> </span>
{% endblock %}
</h2> </h2>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
</span>
{% endblock %}
</header> </header>
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__instruction"> <div class="step__instruction">
<p> <p>
...@@ -54,10 +59,10 @@ ...@@ -54,10 +59,10 @@
<ol class="list list--fields response__submission__content"> <ol class="list list--fields response__submission__content">
{% for part in saved_response.answer.parts %} {% for part in saved_response.answer.parts %}
<li class="submission__answer__part"> <li class="submission__answer__part">
<article class="submission__answer__part__prompt ui-toggle-visibility"> <article class="submission__answer__part__prompt">
<h2 class="submission__answer__part__prompt__title">{% trans "The prompt for this section." %}</h2> <h2 class="submission__answer__part__prompt__title">{% trans "The prompt for this section." %}</h2>
<div class="submission__answer__part__prompt__copy ui-toggle-visibility__content"> <div class="submission__answer__part__prompt__copy">
{{ part.prompt.description|linebreaks }} {{ part.prompt.description|linebreaks }}
</div> </div>
</article> </article>
...@@ -75,7 +80,7 @@ ...@@ -75,7 +80,7 @@
{% if file_upload_type %} {% if file_upload_type %}
<li class="field"> <li class="field">
<div id="upload__error"> <div id="upload__error">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not upload this file" %}</h3> <h3 class="message__title">{% trans "We could not upload this file" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
...@@ -92,7 +97,7 @@ ...@@ -92,7 +97,7 @@
<span class="tip">{% trans "You may continue to work on your response until you submit it." %}</span> <span class="tip">{% trans "You may continue to work on your response until you submit it." %}</span>
<div class="response__submission__actions"> <div class="response__submission__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not save your progress" %}</h3> <h3 class="message__title">{% trans "We could not save your progress" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
...@@ -132,7 +137,7 @@ ...@@ -132,7 +137,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your response" %}</h3> <h3 class="message__title">{% trans "We could not submit your response" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
......
openassessment/templates/openassessmentblock/response/oa_response_cancelled.html
...@@ -3,21 +3,23 @@ ...@@ -3,21 +3,23 @@
{% load tz %} {% load tz %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility has--error"> <li id="openassessment__response"
class="openassessment__steps__step step--response has--error ui-slidable__container"
tabindex="-1">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Cancelled" %}</span> <span class="copy">{% trans "Cancelled" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility"> <li id="openassessment__response"
class="openassessment__steps__step step--response is--incomplete ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span> <span class="copy">{% trans "Incomplete" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/response/oa_response_graded.html
...@@ -2,21 +2,27 @@ ...@@ -2,21 +2,27 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed {% if allow_latex %}allow--latex{%endif%}"> <li id="openassessment__response"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span> <span class="copy">{% trans "Complete" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<article class="submission__answer__display"> <article class="submission__answer__display">
......
openassessment/templates/openassessmentblock/response/oa_response_submitted.html
...@@ -2,21 +2,27 @@ ...@@ -2,21 +2,27 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed {% if allow_latex %}allow--latex{%endif%}"> <li id="openassessment__response"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span> <span class="copy">{% trans "Complete" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--complete"> <div class="step__message message message--complete">
......
openassessment/templates/openassessmentblock/response/oa_response_unavailable.html
...@@ -2,7 +2,13 @@ ...@@ -2,7 +2,13 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--empty is--unavailable is--collapsed"> <li id="openassessment__response"
class="openassessment__steps__step step--response is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -2,40 +2,46 @@ ...@@ -2,40 +2,46 @@
{% load tz %} {% load tz %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}"> <li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %} {% endblock %}
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> {% block button %}
<span class="wrapper--copy"> <button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
<span class="step__label">{% trans "Assess Your Response" %}</span> {% endblock %}
{% if self_start %} <span class="step__counter"></span>
<span class="step__deadline"> <span class="wrapper--copy">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #} <span class="step__label">{% trans "Assess Your Response" %}</span>
{% blocktrans with start_date=self_start|timezone:time_zone|date:"N j, Y H:i e" time_until=self_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %} {% if self_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=self_start|timezone:time_zone|date:"N j, Y H:i e" time_until=self_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% elif self_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=self_due|timezone:time_zone|date:"N j, Y H:i e" time_until=self_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% endif %}
</span> </span>
{% elif self_due %} </button>
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=self_due|timezone:time_zone|date:"N j, Y H:i e" time_until=self_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% endif %}
</span>
</h2>
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span> <span class="copy">{% trans "In Progress" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
</h2>
</header> </header>
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_self_{{ xblock_id }}" id="oa_self_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<article class="self-assessment__display" id="self-assessment"> <article class="self-assessment__display" id="self-assessment">
...@@ -56,7 +62,7 @@ ...@@ -56,7 +62,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3> <h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
......
openassessment/templates/openassessmentblock/self/oa_self_cancelled.html
...@@ -4,14 +4,20 @@ ...@@ -4,14 +4,20 @@
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment"> <li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy"> <span class="copy">
{% trans "Cancelled" %} {% trans "Cancelled" %}
</span> </span>
......
openassessment/templates/openassessmentblock/self/oa_self_closed.html
...@@ -2,21 +2,27 @@ ...@@ -2,21 +2,27 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility"> <li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--showing is--incomplete ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span> <span class="copy">{% trans "Incomplete" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_self_{{ xblock_id }}" id="oa_self_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/self/oa_self_complete.html
...@@ -2,14 +2,20 @@ ...@@ -2,14 +2,20 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--complete is--empty is--collapsed"> <li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--complete is--empty ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span> <span class="copy">{% trans "Complete" %}</span>
</span> </span>
</span> </span>
......
openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
...@@ -2,7 +2,13 @@ ...@@ -2,7 +2,13 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--empty is--unavailable is--collapsed"> <li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
openassessment/templates/openassessmentblock/staff/oa_staff_grade.html
{% load i18n %} {% load i18n %}
<li id="openassessment__staff-assessment" class="openassessment__steps__step step--staff-assessment {{ step_classes }}"> <li id="openassessment__staff-assessment" class="openassessment__steps__step step--staff-assessment ui-slidable__container {{ step_classes }}" tabindex="-1">
<header class="step__header"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> <button class="ui-slidable" {{ button_active }}
<span class="wrapper--copy"> {% if message_title %}
<span class="step__label">{% trans "Staff Grade" %} </span> id="oa_staff_grade_{{ xblock_id }}" aria-controls="oa_staff_grade_{{ xblock_id }}_content"
{% endif %}
>
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Staff Grade" %} </span>
</span>
</button>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
{% if icon_class %}
<span class="icon fa {{ icon_class }}" aria-hidden="true"></span>
{% endif %}
<span class="copy">{{ status_value }}</span>
</span>
</span> </span>
</h2> </h2>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
{% if icon_class %}
<i class="icon fa {{ icon_class }}" aria-hidden="true"></i>
{% endif %}
<span class="copy">{{ status_value }}</span>
</span>
</span>
</header> </header>
{% if message_title %} {% if message_title %}
<div class="wrapper--step__content"> <div class="ui-slidable__content" aria-labelledby="oa_staff_grade_{{ xblock_id }}" id="oa_staff_grade_{{ xblock_id }}_content">
<div class="step__message message message--incomplete"> <div class="wrapper--step__content">
<h3 class="message__title">{{ message_title }}</h3> <div class="step__message message message--incomplete">
<h3 class="message__title">{{ message_title }}</h3>
<div class="message__content"> <div class="message__content">
<p>{{ message_content }}</p> <p>{{ message_content }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_area.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="openassessment__staff-tools wrapper--staff-tools wrapper--ui-staff"> <div class="openassessment__staff-tools wrapper--staff-tools wrapper--ui-staff">
<div class="staff-info ui-staff"> <div class="staff-info ui-staff">
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button> <button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <span class="icon fa fa-close" aria-hidden="true"></span></button>
<h2 class="staff-info__title ui-staff__title"> <h2 class="staff-info__title ui-staff__title">
<span class="staff-info__title__copy">{% trans "Manage Individual Learners" %}</span> <span class="staff-info__title__copy">{% trans "Manage Individual Learners" %}</span>
</h2> </h2>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<div class="openassessment__staff-info wrapper--staff-info wrapper--ui-staff"> <div class="openassessment__staff-info wrapper--staff-info wrapper--ui-staff">
<div class="staff-info ui-staff"> <div class="staff-info ui-staff">
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button> <button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <span class="icon fa fa-close" aria-hidden="true"></span></button>
<h2 class="staff-info__title ui-staff__title"> <h2 class="staff-info__title ui-staff__title">
<span class="staff-info__title__copy">{% trans "View Assignment Statistics" %}</span> <span class="staff-info__title__copy">{% trans "View Assignment Statistics" %}</span>
</h2> </h2>
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
{% if staff_assessment_required %} {% if staff_assessment_required %}
<div class="openassessment__staff-grading wrapper--staff-grading wrapper--ui-staff"> <div class="openassessment__staff-grading wrapper--staff-grading wrapper--ui-staff">
<div class="staff-grading ui-staff"> <div class="staff-grading ui-staff">
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button> <button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <span class="icon fa fa-close" aria-hidden="true"></span></button>
<h2 class="staff-grading__title ui-staff__title"> <h2 class="staff-grading__title ui-staff__title">
<span class="staff-info__title__copy">{% trans "Grade Available Responses" %}</span> <span class="staff-info__title__copy">{% trans "Grade Available Responses" %}</span>
</h2> </h2>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html
{% load i18n %} {% load i18n %}
<div class="staff__grade__control"> <div class="staff__grade__control ui-slidable__container">
<header class="staff__grade__header ui-slidable__control"> <header class="staff__grade__header ui-slidable__control">
<h3 class="staff__grade__title"> <h3 class="staff__grade__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners_assessment.html
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</div> </div>
<div> <div>
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h4 class="message__title">{% trans "We could not submit your assessment" %}</h4> <h4 class="message__title">{% trans "We could not submit your assessment" %}</h4>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_override_assessment.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3> <h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
......
openassessment/templates/openassessmentblock/staff_area/oa_student_info.html
...@@ -12,13 +12,15 @@ ...@@ -12,13 +12,15 @@
</span> </span>
</h2> </h2>
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response"> <div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response ui-slidable__container">
<button class="ui-staff ui-slidable" aria-controls="learner_response_content_{{ submission.uuid }}" aria-expanded="false" id="learner_response_{{ submission.uuid }}"> <div class="ui-slidable__control">
<h2 class="staff-info__title ui-staff__subtitle"> <button class="ui-staff ui-slidable" aria-controls="learner_response_content_{{ submission.uuid }}" aria-expanded="false" id="learner_response_{{ submission.uuid }}">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <h2 class="staff-info__title ui-staff__subtitle">
<span>{% trans "Learner's Response" %}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
</h2> <span>{% trans "Learner's Response" %}</span>
</button> </h2>
</button>
</div>
<div class="ui-slidable__content" role="group" id="learner_response_content_{{ submission.uuid }}" aria-labelledby="learner_response_{{ submission.uuid }}"> <div class="ui-slidable__content" role="group" id="learner_response_content_{{ submission.uuid }}" aria-labelledby="learner_response_{{ submission.uuid }}">
{% if workflow_cancellation %} {% if workflow_cancellation %}
<p> <p>
...@@ -75,13 +77,15 @@ ...@@ -75,13 +77,15 @@
{% include "openassessmentblock/staff_area/oa_student_info_assessment_detail.html" with class_type="staff" assessments=staff_assessment %} {% include "openassessmentblock/staff_area/oa_student_info_assessment_detail.html" with class_type="staff" assessments=staff_assessment %}
{% endif %} {% endif %}
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__grade"> <div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__grade ui-slidable__container">
<button class="ui-staff ui-slidable" aria-controls="final_grade_content_{{ submission.uuid }}" aria-expanded="false" id="final_grade_{{ submission.uuid }}"> <div class="ui-slidable__control">
<h2 class="staff-info__title ui-staff__subtitle"> <button class="ui-staff ui-slidable" aria-controls="final_grade_content_{{ submission.uuid }}" aria-expanded="false" id="final_grade_{{ submission.uuid }}">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <h2 class="staff-info__title ui-staff__subtitle">
<span>{% trans "Learner's Final Grade" %}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
</h2> <span>{% trans "Learner's Final Grade" %}</span>
</button> </h2>
</button>
</div>
<div class="ui-slidable__content" role="group" id="final_grade_content_{{ submission.uuid }}" aria-labelledby="final_grade_{{ submission.uuid }}"> <div class="ui-slidable__content" role="group" id="final_grade_content_{{ submission.uuid }}" aria-labelledby="final_grade_{{ submission.uuid }}">
{% if workflow_status == "done" %} {% if workflow_status == "done" %}
{% if score != None %} {% if score != None %}
...@@ -151,13 +155,15 @@ ...@@ -151,13 +155,15 @@
</div> </div>
{% if not workflow_cancellation %} {% if not workflow_cancellation %}
<div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse"> <div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse ui-slidable__container">
<button class="ui-staff ui-slidable" aria-controls="grade_override_content_{{ submission.uuid }}" aria-expanded="false" id="grade_override_{{ submission.uuid }}"> <div class="ui-slidable__control">
<h2 class="staff-info__title ui-staff__subtitle"> <button class="ui-staff ui-slidable" aria-controls="grade_override_content_{{ submission.uuid }}" aria-expanded="false" id="grade_override_{{ submission.uuid }}">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <h2 class="staff-info__title ui-staff__subtitle">
<span>{% trans "Submit Assessment Grade Override" %}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
</h2> <span>{% trans "Submit Assessment Grade Override" %}</span>
</button> </h2>
</button>
</div>
<div class="staff-info__staff-override__content ui-slidable__content" role="group" id="grade_override_content_{{ submission.uuid }}" aria-labelledby="grade_override_{{ submission.uuid }}"> <div class="staff-info__staff-override__content ui-slidable__content" role="group" id="grade_override_content_{{ submission.uuid }}" aria-labelledby="grade_override_{{ submission.uuid }}">
<div class="wrapper--input"> <div class="wrapper--input">
{% include "openassessmentblock/staff_area/oa_staff_override_assessment.html" %} {% include "openassessmentblock/staff_area/oa_staff_override_assessment.html" %}
...@@ -165,13 +171,15 @@ ...@@ -165,13 +171,15 @@
</div> </div>
</div> </div>
<div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse"> <div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse ui-slidable__container">
<button class="ui-staff ui-slidable" aria-controls="remove_submission_content_{{ submission.uuid }}" aria-expanded="false" id="remove_submission_{{ submission.uuid }}"> <div class="ui-slidable__control">
<h2 class="staff-info__title ui-staff__subtitle"> <button class="ui-staff ui-slidable" aria-controls="remove_submission_content_{{ submission.uuid }}" aria-expanded="false" id="remove_submission_{{ submission.uuid }}">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <h2 class="staff-info__title ui-staff__subtitle">
<span>{% trans "Remove Submission From Peer Grading" %}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
</h2> <span>{% trans "Remove Submission From Peer Grading" %}</span>
</button> </h2>
</button>
</div>
<div class="staff-info__cancel-submission__content ui-slidable__content" role="group" id="remove_submission_content_{{ submission.uuid }}" aria-labelledby="remove_submission_{{ submission.uuid }}"> <div class="staff-info__cancel-submission__content ui-slidable__content" role="group" id="remove_submission_content_{{ submission.uuid }}" aria-labelledby="remove_submission_{{ submission.uuid }}">
<div class="wrapper--input"> <div class="wrapper--input">
<form data-submission-uuid="{{ submission.uuid }}"> <form data-submission-uuid="{{ submission.uuid }}">
......
openassessment/templates/openassessmentblock/staff_area/oa_student_info_assessment_detail.html
{% load i18n %} {% load i18n %}
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments"> <div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments ui-slidable__container">
<button class="ui-staff ui-slidable" aria-controls="{{ class_type }}_content_{{ submission.uuid }}" aria-expanded="false" id="{{ class_type }}_{{ submission.uuid }}"> <div class="ui-slidable__control">
<h2 class="staff-info__title ui-staff__subtitle"> <button class="ui-staff ui-slidable" aria-controls="{{ class_type }}_content_{{ submission.uuid }}" aria-expanded="false" id="{{ class_type }}_{{ submission.uuid }}">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <h2 class="staff-info__title ui-staff__subtitle">
<span>{{ translated_title }}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
</h2> <span>{{ translated_title }}</span>
</button> </h2>
</button>
</div>
<div class="ui-slidable__content" role="group" id="{{ class_type }}_content_{{ submission.uuid }}" aria-labelledby="{{ class_type }}_{{ submission.uuid }}"> <div class="ui-slidable__content" role="group" id="{{ class_type }}_content_{{ submission.uuid }}" aria-labelledby="{{ class_type }}_{{ submission.uuid }}">
{% for assessment in assessments %} {% for assessment in assessments %}
{% with assessment_num=forloop.counter %} {% with assessment_num=forloop.counter %}
......
openassessment/templates/openassessmentblock/student_training/student_training.html
...@@ -2,11 +2,16 @@ ...@@ -2,11 +2,16 @@
{% load tz %} {% load tz %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}"> <li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %} {% endblock %}
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-slidable__control">
<h2 class="step__title"> <h2 class="step__title">
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %}
<span class="step__counter"></span> <span class="step__counter"></span>
<span class="wrapper--copy"> <span class="wrapper--copy">
<span class="step__label">{% trans "Learn to Assess Responses" %}</span> <span class="step__label">{% trans "Learn to Assess Responses" %}</span>
...@@ -23,23 +28,24 @@ ...@@ -23,23 +28,24 @@
</span> </span>
{% endif %} {% endif %}
</span> </span>
</h2> </button>
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">{% trans "In Progress" %} <span class="copy">{% trans "In Progress" %}
(<span class="step__status__value--completed">{{ training_num_completed }}</span> of (<span class="step__status__value--completed">{{ training_num_completed }}</span> of
<span class="step__status__value--required">{{ training_num_available }}</span>) <span class="step__status__value--required">{{ training_num_available }}</span>)
</span>
</span> </span>
</span> </span>
</span> {% endblock %}
{% endblock %} </h2>
</header> </header>
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}" id="oa_training_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div id="openassessment__student-training--instructions" class="step__message message message--correct"> <div id="openassessment__student-training--instructions" class="step__message message message--correct">
...@@ -83,23 +89,25 @@ ...@@ -83,23 +89,25 @@
{% for criterion in training_rubric.criteria %} {% for criterion in training_rubric.criteria %}
{% if criterion.options %} {% if criterion.options %}
<li <li
class="field field--radio is--required assessment__rubric__question ui-toggle-visibility has--options" class="field field--radio is--required assessment__rubric__question has--options is--showing ui-slidable__container"
id="training__assessment__rubric__question--{{ criterion.order_num }}" id="training__assessment__rubric__question--{{ criterion.order_num }}"
> >
<h4 class="question__title ui-toggle-visibility__control"> <h4 class="question__title ui-slidable__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i> <button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}_criterion--{{ criterion.order_num }}" aria-controls="oa_training_{{ xblock_id }}_content_criterion--{{ criterion.order_num }}">
<span id="training__assessment__rubric__prompt--{{ criterion.order_num }}" class="question__title__copy">{{ criterion.prompt }}</span> <span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span class="label--required sr">* ({% trans "Required" %})</span> <span id="training__assessment__rubric__prompt--{{ criterion.order_num }}" class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</button>
</h4> </h4>
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}_criterion--{{ criterion.order_num }}" id="oa_training_{{ xblock_id }}_content_criterion--{{ criterion.order_num }}">
<div class="step__message message message--correct ui-toggle-visibility is--hidden"> <div class="step__message message message--correct is--hidden">
<h3 class="message__title">{% trans "Selected Options Agree" %}</h3> <h3 class="message__title">{% trans "Selected Options Agree" %}</h3>
<div class="message__content"> <div class="message__content">
<p>{% trans "The option you selected is the option that the instructor selected." %}</p> <p>{% trans "The option you selected is the option that the instructor selected." %}</p>
</div> </div>
</div> </div>
<div class="step__message message message--incorrect ui-toggle-visibility is--hidden"> <div class="step__message message message--incorrect is--hidden">
<h3 class="message__title">{% trans "Selected Options Differ" %}</h3> <h3 class="message__title">{% trans "Selected Options Differ" %}</h3>
<div class="message__content"> <div class="message__content">
...@@ -138,7 +146,7 @@ ...@@ -138,7 +146,7 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--inline message--error message--error-server"> <div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not check your assessment" %}</h3> <h3 class="message__title">{% trans "We could not check your assessment" %}</h3>
<div class="message__content"></div> <div class="message__content"></div>
</div> </div>
......
openassessment/templates/openassessmentblock/student_training/student_training_cancelled.html
...@@ -3,14 +3,20 @@ ...@@ -3,14 +3,20 @@
{% load tz %} {% load tz %}
{% block list_item %} {% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training"> <li id="openassessment__student-training"
class="openassessment__steps__step step--student-training ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Cancelled" %}</span> <span class="copy">{% trans "Cancelled" %}</span>
</span> </span>
</span> </span>
......
openassessment/templates/openassessmentblock/student_training/student_training_closed.html
...@@ -2,21 +2,27 @@ ...@@ -2,21 +2,27 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training is--incomplete ui-toggle-visibility"> <li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--showing is--incomplete ui-slidable__container
tabindex="-1"">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span> <span class="copy">{% trans "Incomplete" %}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}" id="oa_training_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/student_training/student_training_complete.html
...@@ -2,14 +2,20 @@ ...@@ -2,14 +2,20 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training is--complete is--empty is--collapsed"> <li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--complete is--empty ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span> <span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i> <span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span> <span class="copy">{% trans "Complete" %}</span>
</span> </span>
</span> </span>
......
openassessment/templates/openassessmentblock/student_training/student_training_error.html
{% extends "openassessmentblock/student_training/student_training.html" %} {% extends "openassessmentblock/student_training/student_training.html" %}
{% load i18n %} {% load i18n %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}" id="oa_training_{{ xblock_id }}_content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/student_training/student_training_unavailable.html
...@@ -2,7 +2,13 @@ ...@@ -2,7 +2,13 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training is--empty is--unavailable is--collapsed"> <li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
openassessment/xblock/grade_mixin.py
...@@ -49,17 +49,24 @@ class GradeMixin(object): ...@@ -49,17 +49,24 @@ class GradeMixin(object):
status = workflow.get('status') status = workflow.get('status')
# Default context is empty # Default context is empty
context = {} context = {'xblock_id': self.get_xblock_id()}
assessment_steps = self.assessment_steps
# Render the grading section based on the status of the workflow # Render the grading section based on the status of the workflow
try: try:
if status == "cancelled": if status == "cancelled":
path = 'openassessmentblock/grade/oa_grade_cancelled.html' path = 'openassessmentblock/grade/oa_grade_cancelled.html'
context = {'score': workflow['score']} context['score'] = workflow['score']
elif status == "done": elif status == "done":
path, context = self.render_grade_complete(workflow) path, context = self.render_grade_complete(workflow)
elif status == "waiting": elif status == "waiting":
path, context = 'openassessmentblock/grade/oa_grade_waiting.html', {} # The class "is--waiting--staff" is needed in the grade template for the javascript to
# send focus to the correct step.
# In the case where the user has completed all steps but is still waiting on a staff grade,
# we want focus to go from the assessment steps to the staff grading step.
if "staff-assessment" in assessment_steps:
context['is_waiting_staff'] = "is--waiting--staff"
path, context = 'openassessmentblock/grade/oa_grade_waiting.html', context
elif status is None: elif status is None:
path = 'openassessmentblock/grade/oa_grade_not_started.html' path = 'openassessmentblock/grade/oa_grade_not_started.html'
else: # status is 'self' or 'peer', which implies that the workflow is incomplete else: # status is 'self' or 'peer', which implies that the workflow is incomplete
...@@ -139,7 +146,8 @@ class GradeMixin(object): ...@@ -139,7 +146,8 @@ class GradeMixin(object):
), ),
'file_upload_type': self.file_upload_type, 'file_upload_type': self.file_upload_type,
'allow_latex': self.allow_latex, 'allow_latex': self.allow_latex,
'file_url': self.get_download_url_from_submission(student_submission) 'file_url': self.get_download_url_from_submission(student_submission),
'xblock_id': self.get_xblock_id()
} }
return ('openassessmentblock/grade/oa_grade_complete.html', context) return ('openassessmentblock/grade/oa_grade_complete.html', context)
...@@ -168,7 +176,7 @@ class GradeMixin(object): ...@@ -168,7 +176,7 @@ class GradeMixin(object):
return ( return (
'openassessmentblock/grade/oa_grade_incomplete.html', 'openassessmentblock/grade/oa_grade_incomplete.html',
{'incomplete_steps': incomplete_steps} {'incomplete_steps': incomplete_steps, 'xblock_id': self.get_xblock_id()}
) )
@XBlock.json_handler @XBlock.json_handler
......
openassessment/xblock/leaderboard_mixin.py
...@@ -86,7 +86,10 @@ class LeaderboardMixin(object): ...@@ -86,7 +86,10 @@ class LeaderboardMixin(object):
score.pop('content', None) score.pop('content', None)
context = {'topscores': scores, 'allow_latex': self.allow_latex, 'file_upload_type': self.file_upload_type,} context = {'topscores': scores,
'allow_latex': self.allow_latex,
'file_upload_type': self.file_upload_type,
'xblock_id': self.get_xblock_id()}
return 'openassessmentblock/leaderboard/oa_leaderboard_show.html', context return 'openassessmentblock/leaderboard/oa_leaderboard_show.html', context
...@@ -97,4 +100,4 @@ class LeaderboardMixin(object): ...@@ -97,4 +100,4 @@ class LeaderboardMixin(object):
Returns: Returns:
template_path (string), tuple of context (dict) template_path (string), tuple of context (dict)
""" """
return 'openassessmentblock/leaderboard/oa_leaderboard_waiting.html', {} return 'openassessmentblock/leaderboard/oa_leaderboard_waiting.html', {'xblock_id': self.get_xblock_id()}
openassessment/xblock/openassessmentblock.py
...@@ -990,3 +990,9 @@ class OpenAssessmentBlock( ...@@ -990,3 +990,9 @@ class OpenAssessmentBlock(
return effective return effective
return start return start
def get_xblock_id(self):
"""
Returns the xblock id
"""
return self._serialize_opaque_key(self.scope_ids.usage_id)
openassessment/xblock/peer_assessment_mixin.py
...@@ -167,6 +167,7 @@ class PeerAssessmentMixin(object): ...@@ -167,6 +167,7 @@ class PeerAssessmentMixin(object):
"rubric_criteria": self.rubric_criteria_with_labels, "rubric_criteria": self.rubric_criteria_with_labels,
"allow_latex": self.allow_latex, "allow_latex": self.allow_latex,
"time_zone": get_current_time_zone(user_service), "time_zone": get_current_time_zone(user_service),
"xblock_id": self.get_xblock_id(),
} }
if self.rubric_feedback_prompt is not None: if self.rubric_feedback_prompt is not None:
......
openassessment/xblock/self_assessment_mixin.py
...@@ -51,12 +51,14 @@ class SelfAssessmentMixin(object): ...@@ -51,12 +51,14 @@ class SelfAssessmentMixin(object):
SubmissionError: Error occurred while retrieving the current submission. SubmissionError: Error occurred while retrieving the current submission.
SelfAssessmentRequestError: Error occurred while checking if we had a self-assessment. SelfAssessmentRequestError: Error occurred while checking if we had a self-assessment.
""" """
path = 'openassessmentblock/self/oa_self_unavailable.html' path = 'openassessmentblock/self/oa_self_unavailable.html'
problem_closed, reason, start_date, due_date = self.is_closed(step="self-assessment") problem_closed, reason, start_date, due_date = self.is_closed(step="self-assessment")
user_service = self.runtime.service(self, 'user') user_service = self.runtime.service(self, 'user')
context = { context = {
'allow_latex': self.allow_latex, 'allow_latex': self.allow_latex,
"xblock_id": self.get_xblock_id(),
'time_zone': get_current_time_zone(user_service) 'time_zone': get_current_time_zone(user_service)
} }
......
openassessment/xblock/staff_assessment_mixin.py
""" """""
A mixin for staff grading. A mixin for staff grading.
""" """
import logging import logging
...@@ -96,19 +96,23 @@ class StaffAssessmentMixin(object): ...@@ -96,19 +96,23 @@ class StaffAssessmentMixin(object):
path = 'openassessmentblock/staff/oa_staff_grade.html' path = 'openassessmentblock/staff/oa_staff_grade.html'
not_available_context = { not_available_context = {
'status_value': self._('Not Available'), 'status_value': self._('Not Available'),
'step_classes': 'is--unavailable is--empty is--collapsed', 'button_active': 'disabled=disabled aria-expanded=false',
'step_classes': 'is--unavailable',
} }
if status == 'cancelled': if status == 'cancelled':
context = { context = {
'status_value': self._('Cancelled'), 'status_value': self._('Cancelled'),
'icon_class': 'fa-exclamation-triangle', 'icon_class': 'fa-exclamation-triangle',
'step_classes': 'is--unavailable',
'button_active': 'disabled=disabled aria-expanded=false',
} }
elif status == 'done': # Staff grade exists and all steps completed. elif status == 'done': # Staff grade exists and all steps completed.
context = { context = {
'status_value': self._('Complete'), 'status_value': self._('Complete'),
'icon_class': 'fa-check', 'icon_class': 'fa-check',
'step_classes': 'is--complete is--empty is--collapsed', 'step_classes': 'is--complete is--empty',
'button_active': 'disabled=disabled aria-expanded=false',
} }
elif status == 'waiting': elif status == 'waiting':
# If we are in the 'waiting' workflow, this means that a staff grade cannot exist # If we are in the 'waiting' workflow, this means that a staff grade cannot exist
...@@ -118,6 +122,8 @@ class StaffAssessmentMixin(object): ...@@ -118,6 +122,8 @@ class StaffAssessmentMixin(object):
'status_value': self._('Not Available'), 'status_value': self._('Not Available'),
'message_title': self._('Waiting for a Staff Grade'), 'message_title': self._('Waiting for a Staff Grade'),
'message_content': self._('Check back later to see if a course staff member has assessed your response. You will receive your grade after the assessment is complete.'), 'message_content': self._('Check back later to see if a course staff member has assessed your response. You will receive your grade after the assessment is complete.'),
'step_classes': 'is--showing',
'button_active': 'aria-expanded=true',
} }
elif status is None: # not started elif status is None: # not started
context = not_available_context context = not_available_context
...@@ -128,8 +134,10 @@ class StaffAssessmentMixin(object): ...@@ -128,8 +134,10 @@ class StaffAssessmentMixin(object):
'icon_class': 'fa-check', 'icon_class': 'fa-check',
'message_title': self._('You Must Complete the Steps Above to View Your Grade'), 'message_title': self._('You Must Complete the Steps Above to View Your Grade'),
'message_content': self._('Although a course staff member has assessed your response, you will receive your grade only after you have completed all the required steps of this problem.'), 'message_content': self._('Although a course staff member has assessed your response, you will receive your grade only after you have completed all the required steps of this problem.'),
'button_active': 'aria-expanded=false',
} }
else: # Both student and staff still have work to do, just show "Not Available". else: # Both student and staff still have work to do, just show "Not Available".
context = not_available_context context = not_available_context
context['xblock_id'] = self.get_xblock_id()
return path, context return path, context
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/openassessment-lms.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/openassessment-studio.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/spec/lms/oa_base.js
...@@ -81,4 +81,20 @@ describe("OpenAssessment.BaseView", function() { ...@@ -81,4 +81,20 @@ describe("OpenAssessment.BaseView", function() {
// and again after the peer has been assessed. // and again after the peer has been assessed.
expect(numPeerLoads).toBe(2); expect(numPeerLoads).toBe(2);
}); });
it("Steps should have aria-controls and be visible by default", function() {
$(".ui-slidable__container", view.element).each(function() {
var step = this;
var $content = $('.ui-slidable__content', step),
$button = $('.ui-slidable', step)[0];
expect($button).toHaveAttr('aria-controls', $content.id);
expect($content).toHaveAttr('aria-labelledby', $button.id);
if($(step).hasClass('is--showing')) {
expect($button).toHaveAttr('aria-expanded', 'true');
expect(step).toHaveClass('is--showing');
};
});
});
}); });
openassessment/xblock/static/js/spec/lms/oa_staff_area.js
...@@ -409,20 +409,21 @@ describe('OpenAssessment.StaffAreaView', function() { ...@@ -409,20 +409,21 @@ describe('OpenAssessment.StaffAreaView', function() {
it('updates aria-expanded when toggling slidable sections', function() { it('updates aria-expanded when toggling slidable sections', function() {
var staffArea = createStaffArea(), $slidableControls; var staffArea = createStaffArea(), $slidableControls;
chooseStudent(staffArea, 'testStudent'); chooseStudent(staffArea, 'testStudent');
$slidableControls = $('.ui-slidable', staffArea.element); $slidableControls = $('.ui-staff.ui-slidable', staffArea.element);
expect($slidableControls.length).toBe(5); expect($slidableControls.length).toBe(5);
expect($slidableControls).toHaveAttr('aria-expanded', 'false'); expect($slidableControls).toHaveAttr('aria-expanded', 'false');
$slidableControls.click(); $slidableControls[0].click();
expect($slidableControls).toHaveAttr('aria-expanded', 'true'); expect($slidableControls).toHaveAttr('aria-expanded', 'true');
}); });
it('links slidable controls with content', function() { it('links slidable controls with content', function() {
var staffArea = createStaffArea(); var staffArea = createStaffArea();
chooseStudent(staffArea, 'testStudent'); chooseStudent(staffArea, 'testStudent');
$('.ui-slidable', staffArea.element).each(function(index, slidable) { $('.ui-slidable__control', staffArea.element).each(function(index, control) {
var content = $(slidable).next('.ui-slidable__content'); var content = $(control).next('.ui-slidable__content');
expect(content).toHaveAttr('aria-labelledby', slidable.id); var button = $(control).find('.ui-slidable');
expect(slidable).toHaveAttr('aria-controls', content.id); expect(content).toHaveAttr('aria-labelledby', button.id);
expect(button).toHaveAttr('aria-controls', content.id);
}); });
}); });
......
openassessment/xblock/static/js/src/lms/oa_base.js
...@@ -41,6 +41,12 @@ OpenAssessment.clearUnsavedChanges = function() { ...@@ -41,6 +41,12 @@ OpenAssessment.clearUnsavedChanges = function() {
OpenAssessment.BaseView.prototype = { OpenAssessment.BaseView.prototype = {
IS_SHOWING_CLASS: "is--showing",
SLIDABLE_CLASS: "ui-slidable",
SLIDABLE_CONTENT_CLASS: "ui-slidable__content",
SLIDABLE_CONTROLS_CLASS: "ui-slidable__control",
SLIDABLE_CONTAINER_CLASS: "ui-slidable__container",
/** /**
* Checks to see if the scrollTo function is available, then scrolls to the * Checks to see if the scrollTo function is available, then scrolls to the
* top of the list of steps (or the specified selector) for this display. * top of the list of steps (or the specified selector) for this display.
...@@ -57,6 +63,7 @@ OpenAssessment.BaseView.prototype = { ...@@ -57,6 +63,7 @@ OpenAssessment.BaseView.prototype = {
} }
if ($.scrollTo instanceof Function) { if ($.scrollTo instanceof Function) {
$(window).scrollTo($(selector, this.element), 800, {offset: -50}); $(window).scrollTo($(selector, this.element), 800, {offset: -50});
$(selector + " > header ." + this.SLIDABLE_CLASS, this.element).focus();
} }
}, },
...@@ -66,11 +73,31 @@ OpenAssessment.BaseView.prototype = { ...@@ -66,11 +73,31 @@ OpenAssessment.BaseView.prototype = {
* @param {element} parentElement JQuery selector for the container element. * @param {element} parentElement JQuery selector for the container element.
*/ */
setUpCollapseExpand: function(parentElement) { setUpCollapseExpand: function(parentElement) {
parentElement.on('click', '.ui-toggle-visibility__control', function(eventData) { var view = this;
var sel = $(eventData.target).closest('.ui-toggle-visibility');
sel.toggleClass('is--collapsed'); $('.' + view.SLIDABLE_CONTROLS_CLASS, parentElement).each(function() {
} $(this).on("click", function(event) {
); event.preventDefault();
var $slidableControl = $(event.target).closest('.' + view.SLIDABLE_CONTROLS_CLASS);
var $container = $slidableControl.closest('.' + view.SLIDABLE_CONTAINER_CLASS);
var $toggleButton = $slidableControl.find('.' + view.SLIDABLE_CLASS);
var $panel = $slidableControl.next('.' + view.SLIDABLE_CONTENT_CLASS);
if ($container.hasClass('is--showing')) {
$panel.slideUp();
$toggleButton.attr('aria-expanded', 'false');
$container.removeClass('is--showing');
} else if (!$container.hasClass('has--error') &&
!$container.hasClass('is--empty') &&
!$container.hasClass('is--unavailable')) {
$panel.slideDown();
$toggleButton.attr('aria-expanded', 'true');
$container.addClass('is--showing');
}
});
});
}, },
/** /**
...@@ -96,13 +123,13 @@ OpenAssessment.BaseView.prototype = { ...@@ -96,13 +123,13 @@ OpenAssessment.BaseView.prototype = {
* Refresh the Assessment Modules. This should be called any time an action is * Refresh the Assessment Modules. This should be called any time an action is
* performed by the user. * performed by the user.
*/ */
loadAssessmentModules: function() { loadAssessmentModules: function(usageID) {
this.trainingView.load(); this.trainingView.load(usageID);
this.peerView.load(); this.peerView.load(usageID);
this.staffView.load(); this.staffView.load(usageID);
this.selfView.load(); this.selfView.load(usageID);
this.gradeView.load(); this.gradeView.load(usageID);
this.leaderboardView.load(); this.leaderboardView.load(usageID);
/** /**
this.messageView.load() is intentionally omitted. this.messageView.load() is intentionally omitted.
Because of the asynchronous loading, there is no way to tell (from the perspective of the Because of the asynchronous loading, there is no way to tell (from the perspective of the
...@@ -158,6 +185,8 @@ OpenAssessment.BaseView.prototype = { ...@@ -158,6 +185,8 @@ OpenAssessment.BaseView.prototype = {
$(container + " .message__content", element).html('<p>' + (message ? _.escape(message) : "") + '</p>'); $(container + " .message__content", element).html('<p>' + (message ? _.escape(message) : "") + '</p>');
// Toggle the error class // Toggle the error class
$(container, element).toggleClass('has--error', message !== null); $(container, element).toggleClass('has--error', message !== null);
// Send focus to the error message
$(container + " > .message", element).focus();
} }
}, },
...@@ -173,6 +202,8 @@ OpenAssessment.BaseView.prototype = { ...@@ -173,6 +202,8 @@ OpenAssessment.BaseView.prototype = {
} }
var $container = $('#openassessment__' + stepName); var $container = $('#openassessment__' + stepName);
$container.toggleClass('has--error', true); $container.toggleClass('has--error', true);
$container.removeClass('is--showing');
$container.find('.ui-slidable').attr('aria-expanded', 'false');
$container.find('.step__status__value i').removeClass().addClass('icon fa fa-exclamation-triangle'); $container.find('.step__status__value i').removeClass().addClass('icon fa fa-exclamation-triangle');
$container.find('.step__status__value .copy').html(_.escape(errorMessage)); $container.find('.step__status__value .copy').html(_.escape(errorMessage));
}, },
......
openassessment/xblock/static/js/src/lms/oa_grade.js
...@@ -16,15 +16,22 @@ OpenAssessment.GradeView.prototype = { ...@@ -16,15 +16,22 @@ OpenAssessment.GradeView.prototype = {
/** /**
* Load the grade view. * Load the grade view.
*/ */
load: function() { load: function(usageID) {
var view = this; var view = this;
var baseView = this.baseView; var baseView = this.baseView;
var stepID = "#openassessment__grade";
this.server.render('grade').done( this.server.render('grade').done(
function(html) { function(html) {
// Load the HTML and install event handlers // Load the HTML and install event handlers
$('#openassessment__grade', view.element).replaceWith(html); $(stepID, view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__grade', view.element)); view.server.renderLatex($(stepID, view.element));
view.installHandlers(); view.installHandlers();
if (typeof usageID !== 'undefined' &&
!$(stepID, view.element).hasClass("is--unfinished") &&
!$(stepID, view.element).hasClass("is--unstarted") &&
!$(stepID, view.element).hasClass("is--waiting--staff")) {
$("[id='oa_grade_" + usageID + "']", view.element).focus();
}
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
baseView.showLoadError('grade', errMsg); baseView.showLoadError('grade', errMsg);
......
openassessment/xblock/static/js/src/lms/oa_leaderboard.js
...@@ -19,7 +19,7 @@ OpenAssessment.LeaderboardView.prototype = { ...@@ -19,7 +19,7 @@ OpenAssessment.LeaderboardView.prototype = {
/** /**
Load the leaderboard view. Load the leaderboard view.
**/ **/
load: function() { load: function(usageID) {
var view = this; var view = this;
var baseView = this.baseView; var baseView = this.baseView;
this.server.render('leaderboard').done( this.server.render('leaderboard').done(
...@@ -27,9 +27,22 @@ OpenAssessment.LeaderboardView.prototype = { ...@@ -27,9 +27,22 @@ OpenAssessment.LeaderboardView.prototype = {
// Load the HTML and install event handlers // Load the HTML and install event handlers
$('#openassessment__leaderboard', view.element).replaceWith(html); $('#openassessment__leaderboard', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__leaderboard', view.element)); view.server.renderLatex($('#openassessment__leaderboard', view.element));
view.installHandlers();
if (typeof usageID !== 'undefined' &&
$("#openassessment__leaderboard", view.element).hasClass("is--showing")) {
$("[id='oa_leaderboard_" + usageID + "']", view.element).focus();
}
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
baseView.showLoadError('leaderboard', errMsg); baseView.showLoadError('leaderboard', errMsg);
}); });
} },
/**
Install event handlers for the view.
**/
installHandlers: function() {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand($('#openassessment__leaderboard', this.element));
},
}; };
openassessment/xblock/static/js/src/lms/oa_peer.js
...@@ -23,14 +23,18 @@ OpenAssessment.PeerView.prototype = { ...@@ -23,14 +23,18 @@ OpenAssessment.PeerView.prototype = {
/** /**
Load the peer assessment view. Load the peer assessment view.
**/ **/
load: function() { load: function(usageID) {
var view = this; var view = this;
var stepID = "#openassessment__peer-assessment";
this.server.render('peer_assessment').done( this.server.render('peer_assessment').done(
function(html) { function(html) {
// Load the HTML and install event handlers // Load the HTML and install event handlers
$('#openassessment__peer-assessment', view.element).replaceWith(html); $(stepID, view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__peer-assessment', view.element)); view.server.renderLatex($(stepID, view.element));
view.installHandlers(false); view.installHandlers(false);
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_peer_" + usageID + "']", view.element).focus();
}
} }
).fail(function() { ).fail(function() {
view.baseView.showLoadError('peer-assessment'); view.baseView.showLoadError('peer-assessment');
...@@ -46,7 +50,7 @@ OpenAssessment.PeerView.prototype = { ...@@ -46,7 +50,7 @@ OpenAssessment.PeerView.prototype = {
can use to continue assessing peers after they've completed can use to continue assessing peers after they've completed
their peer assessment requirements. their peer assessment requirements.
**/ **/
loadContinuedAssessment: function() { loadContinuedAssessment: function(usageID) {
var view = this; var view = this;
view.continueAssessmentEnabled(false); view.continueAssessmentEnabled(false);
this.server.renderContinuedPeer().done( this.server.renderContinuedPeer().done(
...@@ -55,6 +59,9 @@ OpenAssessment.PeerView.prototype = { ...@@ -55,6 +59,9 @@ OpenAssessment.PeerView.prototype = {
$('#openassessment__peer-assessment', view.element).replaceWith(html); $('#openassessment__peer-assessment', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__peer-assessment', view.element)); view.server.renderLatex($('#openassessment__peer-assessment', view.element));
view.installHandlers(true); view.installHandlers(true);
if (typeof usageID !== 'undefined') {
$("[id='oa_peer_" + usageID + "']", view.element).focus();
}
} }
).fail(function() { ).fail(function() {
view.baseView.showLoadError('peer-assessment'); view.baseView.showLoadError('peer-assessment');
...@@ -131,7 +138,7 @@ OpenAssessment.PeerView.prototype = { ...@@ -131,7 +138,7 @@ OpenAssessment.PeerView.prototype = {
sel.find('.action--continue--grading').click( sel.find('.action--continue--grading').click(
function(eventObject) { function(eventObject) {
eventObject.preventDefault(); eventObject.preventDefault();
view.loadContinuedAssessment(); view.loadContinuedAssessment(view.baseView.getUsageID());
} }
); );
}, },
...@@ -183,10 +190,11 @@ OpenAssessment.PeerView.prototype = { ...@@ -183,10 +190,11 @@ OpenAssessment.PeerView.prototype = {
peerAssess: function() { peerAssess: function() {
var view = this; var view = this;
var baseView = view.baseView; var baseView = view.baseView;
var usageID = baseView.getUsageID();
this.peerAssessRequest(function() { this.peerAssessRequest(function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY); baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
baseView.loadAssessmentModules(); baseView.loadAssessmentModules(usageID);
baseView.scrollToTop(); baseView.scrollToTop("#openassessment__peer-assessment");
}); });
}, },
...@@ -198,11 +206,12 @@ OpenAssessment.PeerView.prototype = { ...@@ -198,11 +206,12 @@ OpenAssessment.PeerView.prototype = {
var view = this; var view = this;
var gradeView = this.baseView.gradeView; var gradeView = this.baseView.gradeView;
var baseView = view.baseView; var baseView = view.baseView;
var usageID = baseView.getUsageID();
view.peerAssessRequest(function() { view.peerAssessRequest(function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY); baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
view.loadContinuedAssessment(); view.loadContinuedAssessment(usageID);
gradeView.load(); gradeView.load();
baseView.scrollToTop(); baseView.scrollToTop("#openassessment__peer-assessment");
}); });
}, },
......
openassessment/xblock/static/js/src/lms/oa_response.js
...@@ -39,19 +39,22 @@ OpenAssessment.ResponseView.prototype = { ...@@ -39,19 +39,22 @@ OpenAssessment.ResponseView.prototype = {
MAX_FILE_SIZE: 5242880, MAX_FILE_SIZE: 5242880,
UNSAVED_WARNING_KEY: "learner-response", UNSAVED_WARNING_KEY: "learner-response",
/** /**
Load the response (submission) view. Load the response (submission) view.
**/ **/
load: function() { load: function(usageID) {
var view = this; var view = this;
var stepID = '#openassessment__response';
this.server.render('submission').done( this.server.render('submission').done(
function(html) { function(html) {
// Load the HTML and install event handlers // Load the HTML and install event handlers
$('#openassessment__response', view.element).replaceWith(html); $(stepID, view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__response', view.element)); view.server.renderLatex($(stepID, view.element));
view.installHandlers(); view.installHandlers();
view.setAutoSaveEnabled(true); view.setAutoSaveEnabled(true);
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_response_" + usageID + "']", view.element).focus();
}
} }
).fail(function() { ).fail(function() {
view.baseView.showLoadError('response'); view.baseView.showLoadError('response');
...@@ -68,7 +71,6 @@ OpenAssessment.ResponseView.prototype = { ...@@ -68,7 +71,6 @@ OpenAssessment.ResponseView.prototype = {
if (sel.find('.submission__answer__display__file').length) { if (sel.find('.submission__answer__display__file').length) {
uploadType = sel.find('.submission__answer__display__file').data('upload-type'); uploadType = sel.find('.submission__answer__display__file').data('upload-type');
} }
// Install a click handler for collapse/expand // Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel); this.baseView.setUpCollapseExpand(sel);
...@@ -433,12 +435,14 @@ OpenAssessment.ResponseView.prototype = { ...@@ -433,12 +435,14 @@ OpenAssessment.ResponseView.prototype = {
Transition the user to the next step in the workflow. Transition the user to the next step in the workflow.
**/ **/
moveToNextStep: function() { moveToNextStep: function() {
this.load(); var baseView = this.baseView;
this.baseView.loadAssessmentModules(); var usageID = baseView.getUsageID();
this.load(usageID);
baseView.loadAssessmentModules(usageID);
// Disable the "unsaved changes" warning if the user // Disable the "unsaved changes" warning if the user
// tries to navigate to another page. // tries to navigate to another page.
this.baseView.unsavedWarningEnabled(false, this.UNSAVED_WARNING_KEY); baseView.unsavedWarningEnabled(false, this.UNSAVED_WARNING_KEY);
}, },
/** /**
......
openassessment/xblock/static/js/src/lms/oa_self.js
...@@ -23,14 +23,18 @@ OpenAssessment.SelfView.prototype = { ...@@ -23,14 +23,18 @@ OpenAssessment.SelfView.prototype = {
/** /**
Load the self assessment view. Load the self assessment view.
**/ **/
load: function() { load: function(usageID) {
var view = this; var view = this;
var stepID = '#openassessment__self-assessment';
this.server.render('self_assessment').done( this.server.render('self_assessment').done(
function(html) { function(html) {
// Load the HTML and install event handlers // Load the HTML and install event handlers
$('#openassessment__self-assessment', view.element).replaceWith(html); $(stepID, view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__self-assessment', view.element)); view.server.renderLatex($(stepID, view.element));
view.installHandlers(); view.installHandlers();
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_self_" + usageID + "']", view.element).focus();
}
} }
).fail(function() { ).fail(function() {
view.showLoadError('self-assessment'); view.showLoadError('self-assessment');
...@@ -125,6 +129,7 @@ OpenAssessment.SelfView.prototype = { ...@@ -125,6 +129,7 @@ OpenAssessment.SelfView.prototype = {
// Send the assessment to the server // Send the assessment to the server
var view = this; var view = this;
var baseView = this.baseView; var baseView = this.baseView;
var usageID = baseView.getUsageID();
baseView.toggleActionError('self', null); baseView.toggleActionError('self', null);
view.selfSubmitEnabled(false); view.selfSubmitEnabled(false);
...@@ -135,8 +140,9 @@ OpenAssessment.SelfView.prototype = { ...@@ -135,8 +140,9 @@ OpenAssessment.SelfView.prototype = {
).done( ).done(
function() { function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY); baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
baseView.loadAssessmentModules(); baseView.loadAssessmentModules(usageID);
baseView.scrollToTop(); view.load(usageID);
baseView.scrollToTop("#openassessment__self-assessment");
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
baseView.toggleActionError('self', errMsg); baseView.toggleActionError('self', errMsg);
......
openassessment/xblock/static/js/src/lms/oa_staff.js
...@@ -16,14 +16,27 @@ OpenAssessment.StaffView.prototype = { ...@@ -16,14 +16,27 @@ OpenAssessment.StaffView.prototype = {
/** /**
* Load the staff assessment view. * Load the staff assessment view.
**/ **/
load: function() { load: function(usageID) {
var view = this; var view = this;
this.server.render('staff_assessment').done( this.server.render('staff_assessment').done(
function(html) { function(html) {
$('#openassessment__staff-assessment', view.element).replaceWith(html); $('#openassessment__staff-assessment', view.element).replaceWith(html);
view.installHandlers();
if (typeof usageID !== 'undefined' &&
$("#openassessment__staff-assessment", view.element).hasClass("is--showing")) {
$("[id='oa_staff_grade_" + usageID + "']", view.element).focus();
}
} }
).fail(function() { ).fail(function() {
view.baseView.showLoadError('staff-assessment'); view.baseView.showLoadError('staff-assessment');
}); });
} },
/**
Install event handlers for the view.
**/
installHandlers: function() {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand($('#openassessment__staff-assessment', this.element));
},
}; };
openassessment/xblock/static/js/src/lms/oa_staff_area.js
...@@ -22,9 +22,6 @@ ...@@ -22,9 +22,6 @@
FULL_GRADE_UNSAVED_WARNING_KEY: "staff-grade", FULL_GRADE_UNSAVED_WARNING_KEY: "staff-grade",
OVERRIDE_UNSAVED_WARNING_KEY: "staff-override", OVERRIDE_UNSAVED_WARNING_KEY: "staff-override",
IS_SHOWING_CLASS: "is--showing",
SLIDABLE_CLASS: "ui-slidable",
SLIDABLE_CONTENT_CLASS: "ui-slidable__content",
/** /**
* Load the staff area. * Load the staff area.
...@@ -114,31 +111,17 @@ ...@@ -114,31 +111,17 @@
} }
); );
} }
// Install click handlers for ui-slidable sections
$manageLearnersTab.find('.' + view.SLIDABLE_CLASS).click( view.baseView.setUpCollapseExpand($manageLearnersTab);
function(event) {
var $toggle = $(event.currentTarget),
$content = $toggle.next('.' + view.SLIDABLE_CONTENT_CLASS);
if ($toggle.hasClass(view.IS_SHOWING_CLASS)) {
$toggle.removeClass(view.IS_SHOWING_CLASS).attr('aria-expanded', 'false');
$content.slideUp();
}
else {
$toggle.addClass(view.IS_SHOWING_CLASS).attr('aria-expanded', 'true');
$content.slideDown();
}
}
);
// By default, focus is put on the summary. // By default, focus is put on the summary.
$manageLearnersTab.find('.staff-info__student__report__summary').focus(); $manageLearnersTab.find('.staff-info__student__report__summary').focus();
if (classToExpand) { if (classToExpand) {
$manageLearnersTab.find('.' + classToExpand + ' .' + view.SLIDABLE_CONTENT_CLASS) $manageLearnersTab.find('.' + classToExpand + ' .' + view.baseView.SLIDABLE_CONTENT_CLASS)
.slideDown(); .slideDown();
$manageLearnersTab.find('.' + classToExpand + ' .' + view.SLIDABLE_CLASS) $manageLearnersTab.find('.' + classToExpand + ' .' + view.baseView.SLIDABLE_CLASS)
.addClass(view.IS_SHOWING_CLASS).attr('aria-expanded', 'true').focus(); .addClass(view.baseView.IS_SHOWING_CLASS).attr('aria-expanded', 'true').focus();
} }
deferred.resolve(); deferred.resolve();
...@@ -163,16 +146,18 @@ ...@@ -163,16 +146,18 @@
loadStaffGradeForm: function() { loadStaffGradeForm: function() {
var view = this; var view = this;
var $staffGradeTab = $('.openassessment__staff-grading', this.element); var $staffGradeTab = $('.openassessment__staff-grading', this.element);
var $staffGradeControl = $staffGradeTab.find('.' + view.SLIDABLE_CLASS); var $staffGradeControl = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CLASS);
var $staffGradeContent = $staffGradeTab.find('.' + view.SLIDABLE_CONTENT_CLASS); var $staffGradeContent = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTENT_CLASS);
var $staffGradeContainer = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTAINER_CLASS);
var deferred = $.Deferred(); var deferred = $.Deferred();
var showFormError = function(errorMessage) { var showFormError = function(errorMessage) {
$staffGradeTab.find('.staff__grade__form--error').text(errorMessage).focus(); $staffGradeTab.find('.staff__grade__form--error').text(errorMessage).focus();
}; };
$staffGradeControl.toggleClass(view.IS_SHOWING_CLASS, true).attr('aria-expanded', 'true'); $staffGradeControl.attr('aria-expanded', 'true');
if (this.staffGradeFormLoaded) { if (this.staffGradeFormLoaded) {
$staffGradeContent.slideDown(); $staffGradeContent.slideDown();
$staffGradeContainer.addClass(view.baseView.IS_SHOWING_CLASS);
deferred.resolve(); deferred.resolve();
} }
else { else {
...@@ -215,8 +200,11 @@ ...@@ -215,8 +200,11 @@
// For accessibility, move focus to the staff grade form control // For accessibility, move focus to the staff grade form control
// (since this code may have executed as part of "Submit and Grade Next..."). // (since this code may have executed as part of "Submit and Grade Next...").
$staffGradeControl.focus(); $staffGradeControl.focus();
// Install click handlers for ui-slidable sections
view.baseView.setUpCollapseExpand($('.staff__grade__form', view.element));
} }
); );
$staffGradeContainer.addClass(view.baseView.IS_SHOWING_CLASS);
deferred.resolve(); deferred.resolve();
}).fail(function() { }).fail(function() {
...@@ -237,11 +225,13 @@ ...@@ -237,11 +225,13 @@
* form will be presented if the user later expands the staff grade section again). * form will be presented if the user later expands the staff grade section again).
*/ */
closeStaffGradeForm: function(clear) { closeStaffGradeForm: function(clear) {
var $staffGradeTab = $('.openassessment__staff-grading', this.element); var view = this;
var $staffGradeControl = $staffGradeTab.find('.' + this.SLIDABLE_CLASS); var $staffGradeTab = $('.openassessment__staff-grading', view.element);
var $staffGradeContent = $staffGradeTab.find('.' + this.SLIDABLE_CONTENT_CLASS); var $staffGradeControl = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CLASS).first();
var $staffGradeContent = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTENT_CLASS);
var $staffGradeContainer = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTAINER_CLASS);
$staffGradeControl.toggleClass(this.IS_SHOWING_CLASS, false).attr('aria-expanded', 'false'); $staffGradeControl.attr('aria-expanded', 'false');
if (clear) { if (clear) {
// Collapse the editor and update the counts. // Collapse the editor and update the counts.
// This is the case of submitting an assessment and NOT continuing with grading. // This is the case of submitting an assessment and NOT continuing with grading.
...@@ -253,6 +243,7 @@ ...@@ -253,6 +243,7 @@
$staffGradeContent.slideUp(); $staffGradeContent.slideUp();
} }
$staffGradeContainer.removeClass(view.baseView.IS_SHOWING_CLASS);
// For accessibility, move focus to the staff grade form control. // For accessibility, move focus to the staff grade form control.
$staffGradeControl.focus(); $staffGradeControl.focus();
}, },
...@@ -371,7 +362,8 @@ ...@@ -371,7 +362,8 @@
// Install a click handler for showing the staff grading form. // Install a click handler for showing the staff grading form.
$staffGradeTool.find('.staff__grade__show-form').click( $staffGradeTool.find('.staff__grade__show-form').click(
function(event) { function(event) {
var wasShowing = $(event.currentTarget).hasClass(view.IS_SHOWING_CLASS); var $container = $(event.currentTarget).closest('.' + view.baseView.SLIDABLE_CONTAINER_CLASS);
var wasShowing = $container.hasClass(view.baseView.IS_SHOWING_CLASS);
if (wasShowing) { if (wasShowing) {
view.closeStaffGradeForm(false); view.closeStaffGradeForm(false);
} }
......
openassessment/xblock/static/js/src/lms/oa_training.js
...@@ -21,14 +21,18 @@ OpenAssessment.StudentTrainingView.prototype = { ...@@ -21,14 +21,18 @@ OpenAssessment.StudentTrainingView.prototype = {
/** /**
Load the student training view. Load the student training view.
**/ **/
load: function() { load: function(usageID) {
var view = this; var view = this;
var stepID = '#openassessment__student-training';
this.server.render('student_training').done( this.server.render('student_training').done(
function(html) { function(html) {
// Load the HTML and install event handlers // Load the HTML and install event handlers
$('#openassessment__student-training', view.element).replaceWith(html); $(stepID, view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__student-training', view.element)); view.server.renderLatex($(stepID, view.element));
view.installHandlers(); view.installHandlers();
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_training_" + usageID + "']", view.element).focus();
}
} }
).fail(function() { ).fail(function() {
view.baseView.showLoadError('student-training'); view.baseView.showLoadError('student-training');
...@@ -82,22 +86,22 @@ OpenAssessment.StudentTrainingView.prototype = { ...@@ -82,22 +86,22 @@ OpenAssessment.StudentTrainingView.prototype = {
} }
var view = this; var view = this;
var baseView = this.baseView; var baseView = this.baseView;
var usageID = baseView.getUsageID();
this.server.trainingAssess(options).done( this.server.trainingAssess(options).done(
function(corrections) { function(corrections) {
var incorrect = $("#openassessment__student-training--incorrect", view.element); var incorrect = $("#openassessment__student-training--incorrect", view.element);
var instructions = $("#openassessment__student-training--instructions", view.element); var instructions = $("#openassessment__student-training--instructions", view.element);
if (!view.rubric.showCorrections(corrections)) { if (!view.rubric.showCorrections(corrections)) {
view.load(); view.load(usageID);
baseView.loadAssessmentModules(); baseView.loadAssessmentModules(usageID);
incorrect.addClass("is--hidden"); incorrect.addClass("is--hidden");
instructions.removeClass("is--hidden"); instructions.removeClass("is--hidden");
} else { } else {
instructions.addClass("is--hidden"); instructions.addClass("is--hidden");
incorrect.removeClass("is--hidden"); incorrect.removeClass("is--hidden");
} }
baseView.scrollToTop("#openassessment__student-training");
baseView.scrollToTop();
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
// Display the error // Display the error
......
openassessment/xblock/static/sass/oa/elements/_navigation.scss
...@@ -5,71 +5,6 @@ ...@@ -5,71 +5,6 @@
// * openassessment-specific navigation UI // * openassessment-specific navigation UI
// -------------------- // --------------------
// collapse/expand
// --------------------
.ui-toggle-visibility {
// control to toggle
.ui-toggle-visibility__control {
@include transition(color $tmg-f2 ease-in);
@extend %fake-link;
text-decoration: none;
// optional icon
.icon, .ui-toggle-visibility__control__copy {
display: inline-block;
vertical-align: middle;
}
> .icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(90deg)));
}
.ui-toggle-visibility__control__copy {
@include margin-left(($baseline-h/4));
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f1 ease-in 0, max-height $tmg-f2 ease-in 0);
@extend %trans-opacity;
max-height: ($baseline-v*2000);
opacity: 1.0;
@include padding-left(($baseline-h/20));
@include padding-right(($baseline-h/20));
}
// STATE: is collapsed
&.is--collapsed {
>.ui-toggle-visibility__control > .icon {
@include transform(rotate(bidi-rotate-angle(0deg)));
@include transform-origin(50% 50%);
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f2 ease-in 0, max-height $tmg-f1 ease-in 0);
@extend %trans-opacity;
max-height: 0;
overflow: hidden;
opacity: 0.0;
}
}
}
// --------------------
// ui tooltips/hints - based on https://github.com/chinchang/hint.css // ui tooltips/hints - based on https://github.com/chinchang/hint.css
// -------------------- // --------------------
.has--hints { .has--hints {
......
openassessment/xblock/static/sass/oa/elements/_staff.scss
...@@ -22,26 +22,8 @@ ...@@ -22,26 +22,8 @@
.ui-staff { .ui-staff {
.ui-slidable {
.icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(0deg)));
}
&.is--showing {
.icon {
@include transform(rotate(bidi-rotate-angle(90deg)));
@include transform-origin(50% 50%);
}
}
}
.ui-slidable__content { .ui-slidable__content {
padding: ($baseline-v/2) ($baseline-h/4); padding: ($baseline-v/2) ($baseline-h/4);
// Display as initially collapsed.
display: none;
} }
} }
...@@ -329,11 +311,6 @@ ...@@ -329,11 +311,6 @@
padding: 0; padding: 0;
} }
} }
// Override the default color for h3 (for elements that can be toggled).
.ui-slidable__control .staff__grade__title {
color: $action-primary-color;
}
} }
// UI - cancel submission (action) // UI - cancel submission (action)
...@@ -356,13 +333,6 @@ ...@@ -356,13 +333,6 @@
// Learner info section // Learner info section
.staff-info__student__report { .staff-info__student__report {
// Override default button styling.
.ui-slidable {
@extend %btn-reset;
background-color: $staff-bg;
padding: 0;
}
.staff-info__final__grade__table { .staff-info__final__grade__table {
margin-top: ($baseline-v/2); margin-top: ($baseline-v/2);
} }
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -1103,7 +1103,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -1103,7 +1103,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
@include margin-left(0); @include margin-left(0);
@include padding-left(0); @include padding-left(0);
@include border-left(0); @include border-left(0);
width: 100%;
} }
} }
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -30,9 +30,9 @@ ...@@ -30,9 +30,9 @@
// -------------------- // --------------------
%ui-section { %ui-section {
@include transition(all $tmg-f1 ease-in-out); @include transition(all $tmg-f1 ease-in-out);
@include transform(scale(1.0)); @include transform(scale(.99));
@include border-radius(($baseline-v/10)); @include border-radius(($baseline-v/10));
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l1); @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary; border: 1px solid $color-decorative-tertiary;
border-top: ($baseline-v/4) solid $color-decorative-tertiary; border-top: ($baseline-v/4) solid $color-decorative-tertiary;
...@@ -48,16 +48,19 @@ ...@@ -48,16 +48,19 @@
@include transform(scale(1.0)); @include transform(scale(1.0));
} }
// STATE: is collapsed // don't zoom on hover/focus when step has error
&.is--collapsed { &.has--error {
@include transform(scale(0.99));
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
&:hover, &:focus { &:hover, &:focus {
@include transform(scale(1.0)); @include transform(scale(.99));
} }
} }
// STATE: is showing
&.is--showing {
@include transform(scale(1.0));
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l1);
}
// STATE: is loading // STATE: is loading
&.is--loading { &.is--loading {
@include transform(scale(0.99)); @include transform(scale(0.99));
...@@ -169,7 +172,6 @@ ...@@ -169,7 +172,6 @@
@include margin-left(($baseline-h/4)); @include margin-left(($baseline-h/4));
white-space: pre-wrap; white-space: pre-wrap;
display: inline; display: inline;
color: $heading-color;
} }
} }
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -110,18 +110,6 @@ ...@@ -110,18 +110,6 @@
color: inherit; color: inherit;
} }
.ui-toggle-visibility .ui-toggle-visibility__control, .ui-toggle-visibility .ui-toggle-visibility__control .step__label {
color: $action-primary-color;
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// peer assessment // peer assessment
.step--peer-assessment .list--peer-assessments { .step--peer-assessment .list--peer-assessments {
list-style: none outside none !important; list-style: none outside none !important;
...@@ -141,7 +129,7 @@ ...@@ -141,7 +129,7 @@
} }
// submission/results collapse and expand targets // submission/results collapse and expand targets
.question__title.ui-toggle-visibility__control { .question__title.ui-slidable {
.question__title__copy { .question__title__copy {
color: inherit !important; color: inherit !important;
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -97,16 +97,7 @@ ...@@ -97,16 +97,7 @@
display: block; display: block;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
width: 100%; width: 100%;
margin-bottom: 0;
@include media($bp-dl) {
@include bidi-span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include bidi-span-columns(9 of 12);
margin-bottom: 0;
}
.step__counter, .wrapper--copy { .step__counter, .wrapper--copy {
display: inline-block; display: inline-block;
...@@ -178,7 +169,6 @@ ...@@ -178,7 +169,6 @@
.step__label { .step__label {
@extend %t-superheading; @extend %t-superheading;
color: $heading-primary-color;
} }
.step__deadline { .step__deadline {
...@@ -189,33 +179,33 @@ ...@@ -189,33 +179,33 @@
// step status // step status
.step__status { .step__status {
display: inline-block; display: inline;
margin-top: ($baseline-v/4); margin-top: ($baseline-v/4);
@include media($bp-dm) { @include media($bp-dm) {
margin-top: 0; margin-top: 0;
@include float(right); @include float(right);
position: relative; position: relative;
top: -($baseline-v*2); top: -($baseline-v/2) - 2;
} }
@include media($bp-dl) { @include media($bp-dl) {
margin-top: 0; margin-top: 0;
@include float(right); @include float(right);
position: relative; position: relative;
top: -($baseline-v*2); top: -($baseline-v/2) - 2;
} }
@include media($bp-dx) { @include media($bp-dx) {
margin-top: 0; margin-top: 0;
@include float(right); @include float(right);
position: relative; position: relative;
top: -($baseline-v*2); top: -($baseline-v/2) - 2;
} }
.step__status__value { .step__status__value {
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4); padding: ($baseline-v/4)-1 ($baseline-h/4);
background: $color-decorative-tertiary; background: $color-decorative-tertiary;
position: relative; position: relative;
...@@ -317,16 +307,6 @@ ...@@ -317,16 +307,6 @@
} }
} }
// STATE: step is collapsed (not focused on)
&.is--collapsed {
.step__header {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
}
// STATE: step is incomplete // STATE: step is incomplete
&.is--incomplete { &.is--incomplete {
...@@ -416,6 +396,10 @@ ...@@ -416,6 +396,10 @@
color: $white-t; color: $white-t;
} }
} }
button {
opacity: 1;
}
} }
// STATE: has error // STATE: has error
...@@ -437,38 +421,78 @@ ...@@ -437,38 +421,78 @@
.step__label { .step__label {
color: $color-error; color: $color-error;
} }
.message {
}
} }
} }
// -------------------- // --------------------
// collapse and expand styling for step labels // ui-slidable
// -------------------- // --------------------
// TODO: clean this scope up .ui-slidable__container {
.ui-toggle-visibility .ui-toggle-visibility__control .step__label { .ui-slidable__content {
display: none;
width: 100%;
}
// If there is an icon, it should rotate when clicked
@include transition(color $tmg-f2 ease-in); @include transition(color $tmg-f2 ease-in);
color: $action-primary-color; .icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(0deg)));
}
&.is--showing {
.ui-slidable__content {
display: block;
}
&:hover, &:focus { .ui-slidable .icon {
color: $action-primary-color-focus; @include transform(rotate(bidi-rotate-angle(90deg)));
@include transform-origin(50% 50%);
}
.ui-slidable__container {
&:not(.is--showing) {
.icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(0deg)));
}
}
}
} }
&:active, &.is--current { .ui-slidable {
color: $action-primary-color-active; // Override default button styling.
@extend %btn-reset;
color: $heading-primary-color;
background: none;
border-radius: ($baseline-v/4);
padding: 0px;
text-align: inherit;
&:active, &:focus:not(:disabled), &:hover:not(:disabled) {
background: none;
border: none;
box-shadow: none;
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
&:not([disabled]) {
color: $action-primary-color;
}
} }
} }
// -------------------- // --------------------
// submission // submission
// -------------------- // --------------------
.wrapper--openassessment__prompt {
}
.submission__answer__part__prompt { .submission__answer__part__prompt {
@extend %ui-well; @extend %ui-well;
...@@ -789,7 +813,6 @@ ...@@ -789,7 +813,6 @@
.grade__value__title { .grade__value__title {
@extend %t-superheading; @extend %t-superheading;
color: $heading-primary-color;
.grade__value__earned { .grade__value__earned {
@extend %t-strong; @extend %t-strong;
...@@ -1154,14 +1177,4 @@ ...@@ -1154,14 +1177,4 @@
@extend %action-2; @extend %action-2;
@include margin-right(($baseline-v/2)); @include margin-right(($baseline-v/2));
} }
// --------------------
// STATE: incomplete
// --------------------
// --------------------
// STATE: waiting
// --------------------
} }
openassessment/xblock/student_training_mixin.py
...@@ -71,7 +71,7 @@ class StudentTrainingMixin(object): ...@@ -71,7 +71,7 @@ class StudentTrainingMixin(object):
problem_closed, reason, start_date, due_date = self.is_closed(step="student-training") problem_closed, reason, start_date, due_date = self.is_closed(step="student-training")
user_service = self.runtime.service(self, 'user') user_service = self.runtime.service(self, 'user')
context = {} context = {"xblock_id": self.get_xblock_id()}
template = 'openassessmentblock/student_training/student_training_unavailable.html' template = 'openassessmentblock/student_training/student_training_unavailable.html'
# add allow_latex field to the context # add allow_latex field to the context
......
openassessment/xblock/submission_mixin.py
...@@ -380,8 +380,8 @@ class SubmissionMixin(object): ...@@ -380,8 +380,8 @@ class SubmissionMixin(object):
path = 'openassessmentblock/response/oa_response.html' path = 'openassessmentblock/response/oa_response.html'
context = { context = {
'time_zone': get_current_time_zone(user_service) 'time_zone': get_current_time_zone(user_service),
} "xblock_id": self.get_xblock_id()}
# Due dates can default to the distant future, in which case # Due dates can default to the distant future, in which case
# there's effectively no due date. # there's effectively no due date.
......
openassessment/xblock/test/test_leaderboard.py
...@@ -33,7 +33,7 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase): ...@@ -33,7 +33,7 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase):
self._assert_path_and_context( self._assert_path_and_context(
xblock, xblock,
'openassessmentblock/leaderboard/oa_leaderboard_waiting.html', 'openassessmentblock/leaderboard/oa_leaderboard_waiting.html',
{} {'xblock_id': xblock.scope_ids.usage_id}
) )
self._assert_leaderboard_visible(xblock, True) self._assert_leaderboard_visible(xblock, True)
...@@ -243,8 +243,9 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase): ...@@ -243,8 +243,9 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase):
'topscores': scores, 'topscores': scores,
'allow_latex': xblock.allow_latex, 'allow_latex': xblock.allow_latex,
'file_upload_type': xblock.file_upload_type, 'file_upload_type': xblock.file_upload_type,
'xblock_id': xblock.scope_ids.usage_id
}, },
workflow_status='done' workflow_status='done',
) )
self.maxDiff = maxDiff self.maxDiff = maxDiff
......
openassessment/xblock/test/test_peer.py
...@@ -638,6 +638,7 @@ class TestPeerAssessmentRender(XBlockHandlerTestCase): ...@@ -638,6 +638,7 @@ class TestPeerAssessmentRender(XBlockHandlerTestCase):
mock_finished.return_value = (was_graded_enough, 1) mock_finished.return_value = (was_graded_enough, 1)
path, context = xblock.peer_path_and_context(continue_grading) path, context = xblock.peer_path_and_context(continue_grading)
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path) self.assertEqual(path, expected_path)
self.assertItemsEqual(context, expected_context) self.assertItemsEqual(context, expected_context)
......
openassessment/xblock/test/test_self.py
...@@ -443,6 +443,8 @@ class TestSelfAssessmentRender(XBlockHandlerTestCase): ...@@ -443,6 +443,8 @@ class TestSelfAssessmentRender(XBlockHandlerTestCase):
}) })
path, context = xblock.self_path_and_context() path, context = xblock.self_path_and_context()
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path) self.assertEqual(path, expected_path)
self.assertItemsEqual(context, expected_context) self.assertItemsEqual(context, expected_context)
......
openassessment/xblock/test/test_staff.py
...@@ -42,7 +42,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase): ...@@ -42,7 +42,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
def _verify_grade_templates_workflow(self, xblock): def _verify_grade_templates_workflow(self, xblock):
unavailable_context = { unavailable_context = {
'status_value': 'Not Available', 'status_value': 'Not Available',
'step_classes': 'is--unavailable is--empty is--collapsed', 'button_active': 'disabled="disabled" aria-expanded="false"',
'step_classes': 'is--unavailable',
'xblock_id': xblock.scope_ids.usage_id
} }
# Problem not yet started, Staff Grade section is marked "Not Available" # Problem not yet started, Staff Grade section is marked "Not Available"
self._assert_path_and_context(xblock, unavailable_context) self._assert_path_and_context(xblock, unavailable_context)
...@@ -65,7 +67,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase): ...@@ -65,7 +67,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
'message_title': 'You Must Complete the Steps Above to View Your Grade', 'message_title': 'You Must Complete the Steps Above to View Your Grade',
'message_content': 'Although a course staff member has assessed your response, ' 'message_content': 'Although a course staff member has assessed your response, '
'you will receive your grade only after you have completed all ' 'you will receive your grade only after you have completed all '
'the required steps of this problem.' 'the required steps of this problem.',
'button_active': 'aria-expanded="false"',
'xblock_id': xblock.scope_ids.usage_id
} }
) )
...@@ -79,7 +83,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase): ...@@ -79,7 +83,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
{ {
'status_value': 'Complete', 'status_value': 'Complete',
'icon_class': 'fa-check', 'icon_class': 'fa-check',
'step_classes': 'is--complete is--empty is--collapsed', 'step_classes': 'is--showing',
'button_active': 'aria-expanded="true"',
'xblock_id': xblock.scope_ids.usage_id
} }
) )
...@@ -92,6 +98,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase): ...@@ -92,6 +98,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
{ {
'status_value': 'Cancelled', 'status_value': 'Cancelled',
'icon_class': 'fa-exclamation-triangle', 'icon_class': 'fa-exclamation-triangle',
'button_active': 'disabled="disabled" aria-expanded="false"',
'step_classes': 'is--unavailable',
'xblock_id': xblock.scope_ids.usage_id
} }
) )
...@@ -111,6 +120,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase): ...@@ -111,6 +120,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
'message_title': 'Waiting for a Staff Grade', 'message_title': 'Waiting for a Staff Grade',
'message_content': 'Check back later to see if a course staff member has assessed your response. ' 'message_content': 'Check back later to see if a course staff member has assessed your response. '
'You will receive your grade after the assessment is complete.', 'You will receive your grade after the assessment is complete.',
'step_classes': 'is--showing',
'button_active': 'aria-expanded="true"',
'xblock_id': xblock.scope_ids.usage_id
} }
) )
...@@ -121,7 +133,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase): ...@@ -121,7 +133,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
{ {
'status_value': 'Complete', 'status_value': 'Complete',
'icon_class': 'fa-check', 'icon_class': 'fa-check',
'step_classes': 'is--complete is--empty is--collapsed', 'step_classes': 'is--complete is--empty',
'button_active': 'disabled="disabled" aria-expanded="false"',
'xblock_id': xblock.scope_ids.usage_id
} }
) )
......
openassessment/xblock/test/test_student_training.py
...@@ -39,6 +39,9 @@ class StudentTrainingTest(XBlockHandlerTestCase): ...@@ -39,6 +39,9 @@ class StudentTrainingTest(XBlockHandlerTestCase):
""" """
path, context = xblock.training_path_and_context() path, context = xblock.training_path_and_context()
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path) self.assertEqual(path, expected_path)
self.assertEqual(len(context), len(expected_context)) self.assertEqual(len(context), len(expected_context))
for key in expected_context.keys(): for key in expected_context.keys():
...@@ -266,6 +269,9 @@ class StudentTrainingAssessTest(StudentTrainingTest): ...@@ -266,6 +269,9 @@ class StudentTrainingAssessTest(StudentTrainingTest):
""" """
path, context = xblock.training_path_and_context() path, context = xblock.training_path_and_context()
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path) self.assertEqual(path, expected_path)
self.assertEqual(len(context), len(expected_context)) self.assertEqual(len(context), len(expected_context))
for key in expected_context.keys(): for key in expected_context.keys():
......
openassessment/xblock/test/test_submission.py
...@@ -487,6 +487,8 @@ class SubmissionRenderTest(XBlockHandlerTestCase): ...@@ -487,6 +487,8 @@ class SubmissionRenderTest(XBlockHandlerTestCase):
AssertionError: An assertion failed. AssertionError: An assertion failed.
""" """
expected_context['xblock_id'] = xblock.scope_ids.usage_id
path, context = xblock.submission_path_and_context() path, context = xblock.submission_path_and_context()
self.maxDiff = None # Show a full diff self.maxDiff = None # Show a full diff
self.assertEqual(path, expected_path) self.assertEqual(path, expected_path)
......
test/acceptance/accessibility.py
...@@ -29,7 +29,8 @@ class OpenAssessmentA11yTest(OpenAssessmentTest): ...@@ -29,7 +29,8 @@ class OpenAssessmentA11yTest(OpenAssessmentTest):
"empty-heading", # TODO: AC-197 "empty-heading", # TODO: AC-197
"link-href", # TODO: AC-199 "link-href", # TODO: AC-199
"link-name", # TODO: AC-196 "link-name", # TODO: AC-196
"skip-link", # TODO: AC-179 "skip-link", # TODO: AC-179,
"duplicate-id", # TODO: TNL-1593
] ]
}) })
page.a11y_audit.check_for_accessibility_errors() page.a11y_audit.check_for_accessibility_errors()
......
test/acceptance/pages.py
...@@ -76,6 +76,9 @@ class OpenAssessmentPage(PageObject): ...@@ -76,6 +76,9 @@ class OpenAssessmentPage(PageObject):
if self.q(css='#djDebug').visible: if self.q(css='#djDebug').visible:
self.q(css='#djHideToolBarButton').click() self.q(css='#djHideToolBarButton').click()
def button(self, button_css):
return self.q(css=button_css + " > .ui-slidable")
class SubmissionPage(OpenAssessmentPage): class SubmissionPage(OpenAssessmentPage):
""" """
...@@ -407,6 +410,7 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin): ...@@ -407,6 +410,7 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin):
message_title = self.q(css=self._bounded_selector(".message__title")) message_title = self.q(css=self._bounded_selector(".message__title"))
if len(message_title) == 0: if len(message_title) == 0:
return None return None
return message_title.text[0] return message_title.text[0]
def verify_status_value(self, expected_value): def verify_status_value(self, expected_value):
...@@ -418,6 +422,25 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin): ...@@ -418,6 +422,25 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin):
"Expected status value present" "Expected status value present"
).fulfill() ).fulfill()
def open_step(self):
"""
Opens the current step if it is not already open
Returns:
AssessmentPage
"""
container = self._bounded_selector("")
if 'is--showing' not in " ".join(self.q(css=container).attrs('class')):
self.q(css=self._bounded_selector(".ui-slidable")).click()
EmptyPromise(
lambda: 'is--showing' in " ".join(self.q(css=container).attrs('class')),
"Step is showing"
)
return self
class GradePage(OpenAssessmentPage): class GradePage(OpenAssessmentPage):
""" """
......
test/acceptance/tests.py
...@@ -187,7 +187,8 @@ class OpenAssessmentTest(WebAppTest): ...@@ -187,7 +187,8 @@ class OpenAssessmentTest(WebAppTest):
self.staff_asmnt_page.wait_for_page() self.staff_asmnt_page.wait_for_page()
self.assertEqual("Staff Grade", self.staff_asmnt_page.label) self.assertEqual("Staff Grade", self.staff_asmnt_page.label)
self.staff_asmnt_page.verify_status_value(expected_status) self.staff_asmnt_page.verify_status_value(expected_status)
self.assertEqual(expected_message_title, self.staff_asmnt_page.message_title) message_title = self.staff_asmnt_page.open_step().message_title
self.assertEqual(expected_message_title, message_title)
def do_training(self): def do_training(self):
""" """
...@@ -359,6 +360,7 @@ class StaffAssessmentTest(OpenAssessmentTest): ...@@ -359,6 +360,7 @@ class StaffAssessmentTest(OpenAssessmentTest):
self.refresh_page() self.refresh_page()
self.assertEqual(self.STAFF_OVERRIDE_SCORE, self.grade_page.wait_for_page().score) self.assertEqual(self.STAFF_OVERRIDE_SCORE, self.grade_page.wait_for_page().score)
class PeerAssessmentTest(OpenAssessmentTest): class PeerAssessmentTest(OpenAssessmentTest):
""" """
Test the peer-assessment flow. Test the peer-assessment flow.
...@@ -806,8 +808,11 @@ class FullWorkflowMixin(object): ...@@ -806,8 +808,11 @@ class FullWorkflowMixin(object):
self.browser, password=self.TEST_PASSWORD, course_id=self.TEST_COURSE_ID, staff=True self.browser, password=self.TEST_PASSWORD, course_id=self.TEST_COURSE_ID, staff=True
) )
auto_auth_page.visit() auto_auth_page.visit()
username_email = auto_auth_page.get_username_and_email() username_email = auto_auth_page.get_username_and_email()
self.submission_page.visit().submit_response(self.SUBMISSION) self.submission_page.visit().submit_response(self.SUBMISSION)
EmptyPromise(self.submission_page.button("#openassessment__student-training").is_focused(),
"Student training button should be focused")
return username_email return username_email
...@@ -819,8 +824,16 @@ class FullWorkflowMixin(object): ...@@ -819,8 +824,16 @@ class FullWorkflowMixin(object):
(str, str): the username and password of the newly created user (str, str): the username and password of the newly created user
""" """
username, email = self.do_submission() username, email = self.do_submission()
EmptyPromise(self.submission_page.button("#openassessment__student-training").is_focused(),
"Student training button should be focused")
self.do_training() self.do_training()
EmptyPromise(self.submission_page.button("#openassessment__self-assessment").is_focused(),
"Self assessment button should be focused")
self.submit_self_assessment(self.SELF_ASSESSMENT) self.submit_self_assessment(self.SELF_ASSESSMENT)
EmptyPromise(self.submission_page.button("#openassessment__grade").is_focused(),
"Grade button should be focused")
return username, email return username, email
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment