Skip to content

E
edx-platform
Commit 8b29b153 by Kyle Fiedler
Options

Merged courseware branch

parents c217432a 76b4f646
Showing with 178 additions and 133 deletions
accordion.html
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
> >
<a href='/courseware/${format_string(course_name)}/${format_string(chapter['name'])}/${format_string(section['name'])}'> <a href='/courseware/${format_string(course_name)}/${format_string(chapter['name'])}/${format_string(section['name'])}'>
${section['name']} <p>${section['name']}</p>
<p> <p class="subtitle">
${section['format']} ${section['format']}
% if 'time' in section and section['time']!="": % if 'time' in section and section['time']!="":
......
courseware.html
...@@ -2,24 +2,25 @@ ...@@ -2,24 +2,25 @@
<!-- TODO: http://docs.jquery.com/Plugins/Validation --> <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
${init} ${init}
// Show and hide sidebar
var acc_hidden=false; // Show and hide sidebar
$('#hide_acc').click(function() { var acc_hidden=false;
if(acc_hidden) { $('#hide_acc').click(function() {
$('#accordion').show(); if(acc_hidden) {
$('#acc_td').attr("width","320"); $('#accordion').show();
$('#hide_acc').html("&lt;<br>&lt;<br>&lt;"); $('#acc_td').attr("width","320");
acc_hidden=false; $('#hide_acc').html("&lt;<br>&lt;<br>&lt;");
} else { acc_hidden=false;
$('#accordion').hide(); } else {
$('#acc_td').attr("width","0"); $('#accordion').hide();
$('#hide_acc').html("&gt;<br>&gt;<br>&gt;"); $('#acc_td').attr("width","0");
acc_hidden=true; $('#hide_acc').html("&gt;<br>&gt;<br>&gt;");
} acc_hidden=true;
}); }
}); });
});
</script> </script>
<%include file="navigation.html" /> <%include file="navigation.html" />
......
homework.html
<h1> ${ homework['name']} </h1> <h1> ${ homework['name']} Test </h1>
<ol> <ol>
% for problem in homework['problems']: % for problem in homework['problems']:
<li> <li>
<h2> ${ problem['name'] } </h2> <h2>${ problem['name'] }</h2>
${ problem['html'] } ${ problem['html'] }
<br>
<input type="hidden" name="problem_id" value="${ problem['name'] }"> <section>
<input type="submit" value="Check"> <input type="hidden" name="problem_id" value="${ problem['name'] }">
<input type="submit" value="Check">
</section>
</li> </li>
% endfor % endfor
</ol> </ol>
......
problem.html
<h2> ${ problem['name'] } </h2> <h2>${ problem['name'] }</h2>
${ problem['html'] }
<input type="hidden" name="problem_id" value="${ problem['name'] }"> <p> ${ problem['html'] } </p>
% if check_button:
<input id="check_${ id }" type="button" value="Check ${ attempts }" > <section class="action">
% endif <input type="hidden" name="problem_id" value="${ problem['name'] }">
% if reset_button:
<input id="reset_${ id }" type="button" value="Reset ${ attempts }" > % if check_button:
% endif <input id="check_${ id }" type="button" value="Check ${ attempts }" >
% if save_button: % endif
<input id="save_${ id }" type="button" value="Save" > % if reset_button:
% endif <input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
% if answer_available: % endif
<input id="show_${ id }" type="button" value="Show Answer" > % if save_button:
% endif <input id="save_${ id }" type="button" value="Save" >
% if explain : % endif
<a href="/courseware/6.002_Spring_2012/${ explain }">[ Explanation ] </a> % if answer_available:
% endif <input id="show_${ id }" type="button" value="Show Answer" >
% endif
% if explain :
<a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
% endif
</section>
problem.js
function ${ id }_load() { function ${ id }_load() {
$('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }', $('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }',
function() { function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
update_schematics(); update_schematics();
$('#check_${ id }').click(function() { $('#check_${ id }').click(function() {
var submit_data={}; var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){ $.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value; submit_data[value.id]=value.value;
}); });
postJSON('/modx/problem/${ id }/problem_check', postJSON('/modx/problem/${ id }/problem_check',
submit_data, submit_data,
function(json) { function(json) {
if(json['success'] == 'syntax') if(json['success'] == 'syntax')
alert('Syntax error'); alert('Syntax error');
else else
${ id }_load(); ${ id }_load();
});
log_event('problem_check', submit_data);
});
$('#reset_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;
});
postJSON('/modx/problem/${ id }/problem_reset', {'id':'${ id }'}, function(json) {
${ id }_load();
});
log_event('problem_reset', submit_data);
});
$('#show_${ id }').click(function() {
postJSON('/modx/problem/${ id }/problem_show', {}, function(data) {
for (var key in data) {
$("#answer_${ id }_"+key).text(data[key]);
}
});
log_event('problem_show', {'problem':'${ id }'});
});
$('#save_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;});
postJSON('/modx/problem/${ id }/problem_save',
submit_data, function(data){
if(data.success) {
alert('Saved');
}}
);
log_event('problem_save', submit_data);
});
}
);}
$(function() {
${ id }_load();
}); });
log_event('problem_check', submit_data);
});
$('#reset_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;
});
postJSON('/modx/problem/${ id }/problem_reset', {'id':'${ id }'}, function(json) {
${ id }_load();
});
log_event('problem_reset', submit_data);
});
$('#show_${ id }').click(function() {
postJSON('/modx/problem/${ id }/problem_show', {}, function(data) {
for (var key in data) {
$("#answer_${ id }_"+key).text(data[key]);
}
});
log_event('problem_show', {'problem':'${ id }'});
});
$('#save_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;});
postJSON('/modx/problem/${ id }/problem_save',
submit_data, function(data){
if(data.success) {
alert('Saved');
}}
);
log_event('problem_save', submit_data);
});
}
);}
$(function() {
${ id }_load();
});
sass/_base-extends.scss
...@@ -14,19 +14,19 @@ ...@@ -14,19 +14,19 @@
} }
.button { .button {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 0 3px #ccc); @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%)); @include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
@include border-radius(3px); @include border-radius(3px);
border: 1px solid darken($mit-red, 10%); border: 1px solid darken(#888, 10%);
padding: 10px 15px; padding: 4px 8px;
color: #fff; color: #fff;
font: bold $body-font-size $body-font-family; font: bold $body-font-size $body-font-family;
text-shadow: 0 1px 0 darken($mit-red, 10%);
cursor: pointer; cursor: pointer;
-webkit-font-smoothing: antialiased;
&:hover, &:focus { &:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 20%), 0 0 3px #ccc); @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 10%), darken($mit-red, 5%)); @include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
border: 1px solid darken($mit-red, 20%); border: 1px solid darken(#888, 20%);
} }
} }
sass/_base.scss
h1 { h1 {
font-size:1.6em;
margin:20px 0 10px 0;
} }
h2 { h2 {
font-size: $body-font-size;
font-weight: bold;
letter-spacing: 1px;
margin:20px 0 10px 0;
text-transform: uppercase;
} }
h3 { h3 {
...@@ -15,12 +20,11 @@ p { ...@@ -15,12 +20,11 @@ p {
} }
#{$all-text-inputs}, textarea { #{$all-text-inputs}, textarea {
@include border-radius(3px);
@include box-shadow(0 -1px 0 #fff); @include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff); @include linear-gradient(#eee, #fff);
border: 1px solid #bbb; border: 1px solid #999;
font: $body-font-size $body-font-family; font: $body-font-size $body-font-family;
padding: 8px; padding: 4px;
&:focus { &:focus {
border-color: $mit-red; border-color: $mit-red;
...@@ -28,6 +32,6 @@ p { ...@@ -28,6 +32,6 @@ p {
} }
input[type="submit"], input[type="button"], button { input[type="submit"], input[type="button"], button {
// @extend .button; @extend .button;
} }
sass/_courseware.scss
...@@ -8,11 +8,16 @@ div.course-wrapper { ...@@ -8,11 +8,16 @@ div.course-wrapper {
border-right: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3;
display: table-cell; display: table-cell;
font-family: $body-font-family; font-family: $body-font-family;
text-shadow: 0 1px 0 #f6f6f6; overflow: hidden;
text-shadow: 0 1px 0 #f1f1f1;
vertical-align: top; vertical-align: top;
width: grid-width(3); width: grid-width(3);
h3 { h3 {
&:last-child {
@include box-shadow(none);
}
&.ui-accordion-header { &.ui-accordion-header {
color: #000; color: #000;
...@@ -22,11 +27,15 @@ div.course-wrapper { ...@@ -22,11 +27,15 @@ div.course-wrapper {
} }
&.ui-state-default { &.ui-state-default {
@include box-shadow(0 1px 0 #eee);
background: none; background: none;
font-weight: normal;
border: none; border: none;
border-bottom: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee); font-weight: normal;
span.ui-icon {
background-image: url(images/ui-icons_454545_256x240.png);
}
} }
&.ui-state-hover { &.ui-state-hover {
...@@ -38,7 +47,7 @@ div.course-wrapper { ...@@ -38,7 +47,7 @@ div.course-wrapper {
@include box-shadow(none); @include box-shadow(none);
background: none; background: none;
border: 0; border: 0;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #bbb;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
...@@ -53,16 +62,34 @@ div.course-wrapper { ...@@ -53,16 +62,34 @@ div.course-wrapper {
@include border-radius(0); @include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6); @include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6; background: #d6d6d6;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
border: none; border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
overflow: hidden;
li { li {
&.active { &.active {
font-weight: bold; font-weight: bold;
} }
a {
text-decoration: none;
margin-bottom: $body-line-height;
display: block;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
}
} }
} }
} }
...@@ -77,6 +104,19 @@ div.course-wrapper { ...@@ -77,6 +104,19 @@ div.course-wrapper {
ol.vert-mod { ol.vert-mod {
li { li {
@extend .clearfix; @extend .clearfix;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 15px 0;
h2 {
margin-top: 0;
margin-bottom: 15px;
}
input[type="text"] {
display: inline-block;
margin: 8px 4px 4px 10px;
}
} }
} }
......
sass/_theme.scss
...@@ -23,19 +23,11 @@ Bright orange: #fa720a; ...@@ -23,19 +23,11 @@ Bright orange: #fa720a;
*/ */
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 { h1 {
font-size:1.6em;
margin:25px 0 10px 0;
clear:both; clear:both;
} }
h2 { h2 {
font-size:1.1em;
margin:20px 0 10px 0;
clear:both; clear:both;
} }
......
sass/reademe.md
This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster developmnet of CSS. For more information about sass: http://sass-lang.com This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster development of CSS. For more information about sass: http://sass-lang.com
To use sass all you need to do is enter: To use sass all you need to do is enter:
$ gem install sass $ gem install sass
We are also using Bourbon with sass. They are a genaric set of mixins, and functions that allow for more rpid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon
Then to generate Sass files cd to templates directory and watch the sass files with: Then to generate Sass files cd to templates directory and watch the sass files with:
$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb $ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb
This will automatically generate the CSS files on save. This will automatically generate the CSS files on save.
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