Skip to content

E
edx-platform
Commit 76b4f646 by Kyle Fiedler
Options

Added more style for problems and acordion 

--HG--
branch : kf-courseware
parent 1fc4ab7d
Showing with 168 additions and 128 deletions
accordion.html
......@@ -10,9 +10,9 @@
>
<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']}
% if 'time' in section and section['time']!="":
......
courseware.html
......@@ -2,24 +2,25 @@
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<script type="text/javascript">
$(function() {
${init}
// Show and hide sidebar
var acc_hidden=false;
$('#hide_acc').click(function() {
if(acc_hidden) {
$('#accordion').show();
$('#acc_td').attr("width","320");
$('#hide_acc').html("&lt;<br>&lt;<br>&lt;");
acc_hidden=false;
} else {
$('#accordion').hide();
$('#acc_td').attr("width","0");
$('#hide_acc').html("&gt;<br>&gt;<br>&gt;");
acc_hidden=true;
}
});
});
$(function() {
${init}
// Show and hide sidebar
var acc_hidden=false;
$('#hide_acc').click(function() {
if(acc_hidden) {
$('#accordion').show();
$('#acc_td').attr("width","320");
$('#hide_acc').html("&lt;<br>&lt;<br>&lt;");
acc_hidden=false;
} else {
$('#accordion').hide();
$('#acc_td').attr("width","0");
$('#hide_acc').html("&gt;<br>&gt;<br>&gt;");
acc_hidden=true;
}
});
});
</script>
<%include file="navigation.html" />
......
homework.html
<h1> ${ homework['name']} </h1>
<h1> ${ homework['name']} Test </h1>
<ol>
% for problem in homework['problems']:
<li>
<h2> ${ problem['name'] } </h2>
<h2>${ problem['name'] }</h2>
${ problem['html'] }
<br>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
<input type="submit" value="Check">
<section>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
<input type="submit" value="Check">
</section>
</li>
% endfor
</ol>
......
problem.html
<h2> ${ problem['name'] } </h2>
${ problem['html'] }
<h2>${ problem['name'] }</h2>
<input type="hidden" name="problem_id" value="${ problem['name'] }">
% if check_button:
<input id="check_${ id }" type="button" value="Check ${ attempts }" >
% endif
% if reset_button:
<input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
% endif
% if save_button:
<input id="save_${ id }" type="button" value="Save" >
% endif
% if answer_available:
<input id="show_${ id }" type="button" value="Show Answer" >
% endif
% if explain :
<a href="/courseware/6.002_Spring_2012/${ explain }">[ Explanation ] </a>
% endif
<p> ${ problem['html'] } </p>
<section class="action">
<input type="hidden" name="problem_id" value="${ problem['name'] }">
% if check_button:
<input id="check_${ id }" type="button" value="Check ${ attempts }" >
% endif
% if reset_button:
<input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
% endif
% if save_button:
<input id="save_${ id }" type="button" value="Save" >
% endif
% if answer_available:
<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() {
$('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }',
function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
update_schematics();
$('#check_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;
});
postJSON('/modx/problem/${ id }/problem_check',
submit_data,
function(json) {
if(json['success'] == 'syntax')
alert('Syntax error');
else
${ 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();
$('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }',
function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
update_schematics();
$('#check_${ id }').click(function() {
var submit_data={};
$.each($("[id^=input_${ id }_]"), function(index,value){
submit_data[value.id]=value.value;
});
postJSON('/modx/problem/${ id }/problem_check',
submit_data,
function(json) {
if(json['success'] == 'syntax')
alert('Syntax error');
else
${ 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 @@
}
.button {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
@include border-radius(3px);
border: 1px solid darken($mit-red, 10%);
padding: 10px 15px;
border: 1px solid darken(#888, 10%);
padding: 4px 8px;
color: #fff;
font: bold $body-font-size $body-font-family;
text-shadow: 0 1px 0 darken($mit-red, 10%);
cursor: pointer;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 10%), darken($mit-red, 5%));
border: 1px solid darken($mit-red, 20%);
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
border: 1px solid darken(#888, 20%);
}
}
sass/_base.scss
h1 {
font-size:1.6em;
margin:20px 0 10px 0;
}
h2 {
font-size: $body-font-size;
font-weight: bold;
letter-spacing: 1px;
margin:20px 0 10px 0;
text-transform: uppercase;
}
h3 {
......@@ -15,12 +20,11 @@ p {
}
#{$all-text-inputs}, textarea {
@include border-radius(3px);
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #bbb;
border: 1px solid #999;
font: $body-font-size $body-font-family;
padding: 8px;
padding: 4px;
&:focus {
border-color: $mit-red;
......
sass/_courseware.scss
......@@ -8,10 +8,10 @@ div.course-wrapper {
border-right: 1px solid #d3d3d3;
display: table-cell;
font-family: $body-font-family;
text-shadow: 0 1px 0 #f6f6f6;
overflow: hidden;
text-shadow: 0 1px 0 #f1f1f1;
vertical-align: top;
width: grid-width(3);
overflow: hidden;
h3 {
&:last-child {
......@@ -32,6 +32,10 @@ div.course-wrapper {
border: none;
border-bottom: 1px solid #d3d3d3;
font-weight: normal;
span.ui-icon {
background-image: url(images/ui-icons_454545_256x240.png);
}
}
&.ui-state-hover {
......@@ -43,7 +47,7 @@ div.course-wrapper {
@include box-shadow(none);
background: none;
border: 0;
border-bottom: 1px solid #aaa;
border-bottom: 1px solid #bbb;
color: #000;
font-weight: bold;
......@@ -58,16 +62,34 @@ div.course-wrapper {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
border: none;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
overflow: hidden;
li {
&.active {
font-weight: bold;
}
a {
text-decoration: none;
margin-bottom: $body-line-height;
display: block;
&:hover {
color: #666;
}
p {
margin-bottom: 0;
&.subtitle {
color: #666;
}
}
}
}
}
}
......@@ -82,6 +104,19 @@ div.course-wrapper {
ol.vert-mod {
li {
@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;
*/
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size:1.6em;
margin:25px 0 10px 0;
clear:both;
}
h2 {
font-size:1.1em;
margin:20px 0 10px 0;
clear:both;
}
......
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