Skip to content

E
edx-ora2
Commit eb54cb73 by Brian Talbot
Options

Merge pull request #40 from edx/talbs/templates-updateterms 

HTML Templates: Update Term References & Problem Results UI
parents a3ba60ea 78c71eec
Showing with 55 additions and 65 deletions
apps/openassessment/xblock/static/html/t-base.html
...@@ -15,15 +15,15 @@ ...@@ -15,15 +15,15 @@
<h1 class="openassessment__title"> <h1 class="openassessment__title">
<span class="openassessment__title--super"> <span class="openassessment__title--super">
Speech Assignment Number 1 - Tell Us About Yourself Assignment Number 1 - Censorship in Libraries
</span> </span>
<span class="openassessment__title--sub"> <span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span> <span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
+ +
<span class="problem-type problem-type--peer-evaluation">Peer</span> <span class="problem-type problem-type--peer-assessment">Peer</span>
+ +
<span class="problem-type problem-type--self-evaluation">Self Evaluation</span> <span class="problem-type problem-type--self-assessment">Self Assessment</span>
</span> </span>
</h1> </h1>
...@@ -36,10 +36,10 @@ ...@@ -36,10 +36,10 @@
<a class="action" href="#openassessment__response">Your response to this problem</a> <a class="action" href="#openassessment__response">Your response to this problem</a>
</li> </li>
<li class="list--nav__item"> <li class="list--nav__item">
<a class="action" href="#openassessment__peer-evaluation">Your evaluation(s) of peer responses</a> <a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a>
</li> </li>
<li class="list--nav__item"> <li class="list--nav__item">
<a class="action" href="#openassessment__self-evaluation">Your evaluation of your response</a> <a class="action" href="#openassessment__self-assessment">Your assessment of your response</a>
</li> </li>
<li class="list--nav__item"> <li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a> <a class="action" href="#openassessment__grade">Your grade for this problem</a>
...@@ -84,13 +84,13 @@ ...@@ -84,13 +84,13 @@
<!-- ==== --> <!-- ==== -->
<!-- STEP: peer evaluation --> <!-- STEP: peer assessment -->
<!-- SEE t-peer-evaluation.html for all cases --> <!-- SEE t-peer-assessment.html for all cases -->
<!-- ==== --> <!-- ==== -->
<!-- STEP: self evaluation --> <!-- STEP: self assessment -->
<!-- SEE t-self-evaluation.html for all cases --> <!-- SEE t-self-assessment.html for all cases -->
</ol> </ol>
<!-- STATUS: problem grade --> <!-- STATUS: problem grade -->
......
apps/openassessment/xblock/static/html/t-grade.html
...@@ -29,18 +29,18 @@ ...@@ -29,18 +29,18 @@
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span> <span class="grade__value">Incomplete</span>
<p>You have not completed the <span class="step">Response</span>, <span class="step">Peer Evaluation</span>, and <span class="step">Self Evaluation</span> portions of this problem</p> <p>You have not completed the <span class="step">Response</span>, <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem</p>
</div> </div>
</div> </div>
<!-- CASE: is in-progress and incomplete (peer responses to evaluate) --> <!-- CASE: is in-progress and incomplete (peer responses to assess) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-responses"> <div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-responses">
<h2 class="openassessment__grade__title">Your Grade:</h2> <h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span> <span class="grade__value">Incomplete</span>
<p>You have not completed the <span class="step">Peer Evaluation</span>, and <span class="step">Self Evaluation</span> portions of this problem.</p> <p>You have not completed the <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem.</p>
</div> </div>
</div> </div>
...@@ -50,19 +50,19 @@ ...@@ -50,19 +50,19 @@
<h2 class="openassessment__grade__title">Your Grade:</h2> <h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">Waiting for Peers to Evaluate Your Response</span> <span class="grade__value">Waiting for Peers to Assess Your Response</span>
<p>Your response is still being evaluated by your peers. Once complete, you will receive a final grade and detailed feedback from their evaluations.</p> <p>Your response is still being evaluated by your peers. Once complete, you will receive a final grade and detailed feedback from their evaluations.</p>
</div> </div>
</div> </div>
<!-- CASE: is in-progress and incomplete (no self evaluation) --> <!-- CASE: is in-progress and incomplete (no self assessment) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete needs--self-evaluation"> <div id="openassessment__grade" class="openassessment__grade is--incomplete needs--self-assessment">
<h2 class="openassessment__grade__title">Your Grade:</h2> <h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span> <span class="grade__value">Incomplete</span>
<p>You have not completed the <span class="step">Self Evaluation</span> portion of this problem.</p> <p>You have not completed the <span class="step">Self Assessment</span> portion of this problem.</p>
</div> </div>
</div> </div>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span> <span class="grade__value">Incomplete</span>
<p>You did not complete the <span class="step">Peer Evaluation</span>, and <span class="step">Self Evaluation</span> portions of this problem.</p> <p>You did not complete the <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem.</p>
</div> </div>
</div> </div>
......
apps/openassessment/xblock/static/html/t-messages.html
...@@ -15,25 +15,15 @@ ...@@ -15,25 +15,15 @@
<h2 class="message__title">You still need to submit your response to this question</h2> <h2 class="message__title">You still need to submit your response to this question</h2>
<div class="message__copy"> <div class="message__copy">
<p>Please note that self evaluations are due on: <span class="step__deadline">due <span class="date">Jan 24, 2014</span> at <span class="time">15:00 UTC</span></span></p> <p>Please note that self assessments are due on: <span class="step__deadline">due <span class="date">Jan 24, 2014</span> at <span class="time">15:00 UTC</span></span></p>
</div> </div>
</div> </div>
<!-- CASE: completion status is incomplete and self assessment is needed -->
<!-- CASE: completion status is incomplete and peer evaluations are needed -->
<div class="message message--warning">
<h2 class="message__title">You still need to evaluate 2 peers’ responses</h2>
<div class="message__copy">
<p>Please note that self evaluations are due on: <span class="step__deadline">due <span class="date">Jan 24, 2014</span> at <span class="time">15:00 UTC</span></span></p>
</div>
</div>
<!-- CASE: completion status is incomplete and self evaluation is needed -->
<div class="message message--warning"> <div class="message message--warning">
<h2 class="message__title">You still need to complete your self evaluation</h2> <h2 class="message__title">You still need to complete your self assessment</h2>
<div class="message__copy"> <div class="message__copy">
<p>Please note that self evaluations are due on: <span class="step__deadline">due <span class="date">Jan 24, 2014</span> at <span class="time">15:00 UTC</span></span></p> <p>Please note that self assessments are due on: <span class="step__deadline">due <span class="date">Jan 30, 2014</span> at <span class="time">15:00 UTC</span></span></p>
</div> </div>
</div> </div>
......
apps/openassessment/xblock/static/html/t-peer-evaluation.html → apps/openassessment/xblock/static/html/t-peer-assessment.html
<!-- TEMPLATE: peer evaluation --> <!-- TEMPLATE: peer assessment -->
<!-- NOTES: <!-- NOTES:
* class of is--unavailable is added when step is not available * class of is--unavailable is added when step is not available
* each .peer-evaluation item needs a unique id attribute formatted as #peer-evaluation--### * each .peer-assessment item needs a unique id attribute formatted as #peer-assessment--###
* individual rubric questions' answers need specific id attributes in several places * individual rubric questions' answers need specific id attributes in several places
--> -->
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -28,15 +28,15 @@ ...@@ -28,15 +28,15 @@
</header> </header>
<div class="step__instruction"> <div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</p> <p>Please read and assess the following response from one of your peers in the course.</p>
</div> </div>
<div class="step__content"> <div class="step__content">
<ul class="list--peer-evaluations"> <ul class="list--peer-evaluations">
<li class="list--peer-evaluations__item"> <li class="list--peer-evaluations__item">
<article class="peer-evaluation" id="peer-evaluation--001"> <article class="peer-assessment" id="peer-assessment--001">
<header class="peer-evaluation__header"> <header class="peer-evaluation__header">
<h3 class="peer-evaluation__title">Evaluation # <h3 class="peer-evaluation__title">assessment #
<span class="peer-evaluation__number--current">1</span> of <span class="peer-evaluation__number--current">1</span> of
<span class="peer-evaluation__number--required">3</span> <span class="peer-evaluation__number--required">3</span>
</h3> </h3>
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div> </div>
<form id="peer-evaluation--001__evaluation" class="peer-evaluation__evaluation" method="post"> <form id="peer-assessment--001__evaluation" class="peer-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields"> <fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend> <legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="peer-evaluation--001__evaluation__submit" class="action action--submit">Submit your evaluation &amp; move to response #2</button> <button type="submit" id="peer-assessment--001__evaluation__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
</li> </li>
</ul> </ul>
</form> </form>
...@@ -236,10 +236,10 @@ ...@@ -236,10 +236,10 @@
<!-- CASE: started, but incomplete --> <!-- CASE: started, but incomplete -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -253,15 +253,15 @@ ...@@ -253,15 +253,15 @@
</header> </header>
<div class="step__instruction"> <div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</p> <p>Please read and assess the following response from one of your peers in the course.</p>
</div> </div>
<div class="step__content"> <div class="step__content">
<ul class="list--peer-evaluations"> <ul class="list--peer-evaluations">
<li class="list--peer-evaluations__item"> <li class="list--peer-evaluations__item">
<article class="peer-evaluation" id="peer-evaluation--002"> <article class="peer-assessment" id="peer-assessment--002">
<header class="peer-evaluation__header"> <header class="peer-evaluation__header">
<h3 class="peer-evaluation__title">Evaluation # <h3 class="peer-evaluation__title">assessment #
<span class="peer-evaluation__number--current">2</span> of <span class="peer-evaluation__number--current">2</span> of
<span class="peer-evaluation__number--required">3</span> <span class="peer-evaluation__number--required">3</span>
</h3> </h3>
...@@ -283,7 +283,7 @@ ...@@ -283,7 +283,7 @@
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div> </div>
<form id="peer-evaluation--002__evaluation" class="peer-evaluation__evaluation" method="post"> <form id="peer-assessment--002__evaluation" class="peer-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields"> <fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend> <legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
...@@ -449,7 +449,7 @@ ...@@ -449,7 +449,7 @@
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="peer-evaluation--001__evaluation__submit" class="action action--submit">Submit your evaluation &amp; move to response #2</button> <button type="submit" id="peer-assessment--001__evaluation__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
</li> </li>
</ul> </ul>
</form> </form>
...@@ -461,10 +461,10 @@ ...@@ -461,10 +461,10 @@
<!-- CASE: started, but incomplete and problem closed --> <!-- CASE: started, but incomplete and problem closed -->
<li id="openassessment__peer-evaluation"class="openassessment__steps__step step--peer-evaluation is--unavailable"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -480,11 +480,11 @@ ...@@ -480,11 +480,11 @@
</li> </li>
<!-- CASE: no peer responses to evaluate --> <!-- CASE: no peer responses to assess -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation is--unavailable"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -500,10 +500,10 @@ ...@@ -500,10 +500,10 @@
<!-- CASE: completed --> <!-- CASE: completed -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
......
apps/openassessment/xblock/static/html/t-self-evaluation.html → apps/openassessment/xblock/static/html/t-self-assessment.html
<!-- TEMPLATE: self evaluation --> <!-- TEMPLATE: self assessment -->
<!-- NOTES: <!-- NOTES:
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
--> -->
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__self-evaluation" class="openassessment__steps__step step--self-evaluation ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span> <span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</header> </header>
<div class="step--content"> <div class="step--content">
<article class="self-evaluation" id="self-evaluation"> <article class="self-assessment" id="self-assessment">
<header class="self-evaluation__header"> <header class="self-evaluation__header">
<h3 class="self-evaluation__title">Your Submitted Response</h3> <h3 class="self-evaluation__title">Your Submitted Response</h3>
</header> </header>
...@@ -203,7 +203,7 @@ ...@@ -203,7 +203,7 @@
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="self-evaluation__evaluation__submit" class="action action--submit">Submit your self evaluation</button> <button type="submit" id="self-evaluation__evaluation__submit" class="action action--submit">Submit your self assessment</button>
</li> </li>
</ul> </ul>
</form> </form>
...@@ -212,10 +212,10 @@ ...@@ -212,10 +212,10 @@
</li> </li>
<!-- CASE: not started and problem closed --> <!-- CASE: not started and problem closed -->
<li id="openassessment__self-evaluation" class="openassessment__steps__step step--self-evaluation is--unavailable ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span> <span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -226,14 +226,14 @@ ...@@ -226,14 +226,14 @@
</span> </span>
</header> </header>
<!-- TO-DO: static self evaluation (if present) --> <!-- TO-DO: static self assessment (if present) -->
</li> </li>
<!-- CASE: complete --> <!-- CASE: complete -->
<li id="openassessment__self-evaluation" class="openassessment__steps__step step--self-evaluation ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span> <span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2> </h2>
...@@ -244,5 +244,5 @@ ...@@ -244,5 +244,5 @@
</span> </span>
</header> </header>
<!-- ?: should this view be rolled into the general peer evaluation output and not separated out? --> <!-- ?: should this view be rolled into the general peer assessment output and not separated out? -->
</li> </li>
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