Skip to content

E
edx-ora2
Commit add26aed by Brian Talbot
Options

WIP - adding basic flat HTML templates (with rough cases): 

* basic app skeleton HTML
* response HTML
* peer evaluations
* self evaluation
* grade status
* UI messages
parent 7213266f
Showing with 258 additions and 0 deletions
apps/openassessment/xblock/static/html/t-base.html 0 → 100644
<!-- TEMPLATE: status messages -->
<!-- NOTES:
* class of message--warning is added message is a warning/notification to user
* class of message--confirmation is added message is a confirmation to user
* class of has--actions is added when a message has actions associated with it for user to interact with
-->
<div class="wrapper wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
Speech Assignment Number 1 - Tell Us About Yourself
</span>
<span class="openassessment__title--sub">
<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--self-evaluation">Self Evaluation</span>
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
<li class="list--nav__item">
<a class="action" href="#openassessment__response">Your response to this problem</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__peer-evaluation">Your evaluation(s) of peer responses</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__self-evaluation">Your evaluation of your response</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</ol>
</nav>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<blockquote>
<p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p>
<footer>
&mdash; <cite><a href="">Katherine Paterson, Author</a></cite>
</footer>
</blockquote>
<p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
<!-- SEE t-response.html for all cases -->
<!-- ==== -->
<!-- STEP: peer evaluation -->
<!-- SEE t-peer-evaluation.html for all cases -->
<!-- ==== -->
<!-- STEP: self evaluation -->
<!-- SEE t-self-evaluation.html for all cases -->
</ol>
<!-- STATUS: problem grade -->
<!-- SEE t-grade.html for all cases -->
</div>
</div>
<!-- TO-DO: i18n UI elems -->
apps/openassessment/xblock/static/html/t-grade.html 0 → 100644
<!-- TEMPLATE: grade status -->
<!-- NOTES:
* class of is--incomplete is added when the problem is in an incomplete state
* class of is--complete is added when problem is successfully completed by user
* class of has--grade is added when a grade (failing or passing) is calculated for user
* classes of needs--* are added when user action is needed
* classes of awaiting--* are added when a user's flow is dependent upon system readiness
-->
<!-- CASE: default/unstarted -->
<div id="openassessment__grade" class="openassessment__grade is--unstarted">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span>
<p>You have not started this problem</p>
</div>
</div>
<!-- CASE: is in-progress and incomplete (no response submission) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete needs--response">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<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>
</div>
</div>
<!-- CASE: is in-progress and incomplete (peer responses to evaluate) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-responses">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<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>
</div>
</div>
<!-- CASE: is in-progress and incomplete (peer evaluations of user's response) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-evaluations">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Waiting for Peers to Evaluate 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>
</div>
</div>
<!-- CASE: is in-progress and incomplete (no self evaluation) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete needs--self-evaluation">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span>
<p>You have not completed the <span class="step">Self Evaluation</span> portion of this problem.</p>
</div>
</div>
<!-- CASE: is incomplete and problem closed -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete has--grade">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<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>
</div>
</div>
<!-- CASE: is complete -->
<div id="openassessment__grade" class="openassessment__grade is--complete has--grade">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span>
</div>
<div class="grade__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a class="action action--view">View in Courseware</a>
</li>
</ul>
</div>
</div>
apps/openassessment/xblock/static/html/t-messages.html 0 → 100644
<!-- TEMPLATE: status messages -->
<!-- NOTES:
* class of message--warning is added message is a warning/notification to user
* class of message--confirmation is added message is a confirmation to user
* class of has--actions is added when a message has actions associated with it for user to interact with
-->
<!-- CASE: completion status is incomplete and peer evaluations are needed -->
<div class="message message--warning">
<h2 class="message__title">You still need to submit your response to this question</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 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">
<h2 class="message__title">You still need to complete your self evaluation</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: problem is closed and completion status is incomplete -->
<div class="message message--warning">
<h2 class="message__title">This problem’s due date has past &amp; submissions are now closed</h2>
<div class="message__copy">
<p>You did not complete the necessary requirements and received an incomplete grade</p>
</div>
</div>
<!-- CASE: problem is closed/open and completion status is complete -->
<div class="message message--confirmation has--actions">
<h2 class="message__title">You have completed this problem</h2>
<ul class="list--actions">
<li class="list--actions__item">
<a class="action" href="#openassessment__grade">View your grade</a>
</li>
</ul>
</div>
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