{% trans "Redakcja" %} :: {{ book.title }}

From f4ef2a001a939444826ad0df962a814ba97e9185 Mon Sep 17 00:00:00 2001 From: Marcin Koziej Date: Wed, 2 Jan 2013 02:51:24 +0100 Subject: [PATCH 1/1] edumed quiz pt 1 --- .../templates/catalogue/book_text.html | 38 +- lib/librarian | 2 +- redakcja/static/edumed/css/edumed.css | 460 ++++++++++++++++++ redakcja/static/edumed/js/edumed.coffee | 103 ++++ redakcja/static/edumed/js/edumed.js | 151 ++++++ 5 files changed, 727 insertions(+), 27 deletions(-) create mode 100644 redakcja/static/edumed/css/edumed.css create mode 100644 redakcja/static/edumed/js/edumed.coffee create mode 100644 redakcja/static/edumed/js/edumed.js diff --git a/apps/catalogue/templates/catalogue/book_text.html b/apps/catalogue/templates/catalogue/book_text.html index b9cc2f0c..25d9d283 100644 --- a/apps/catalogue/templates/catalogue/book_text.html +++ b/apps/catalogue/templates/catalogue/book_text.html @@ -1,28 +1,14 @@ {% load i18n compressed %} - - - - - {% trans "Redakcja" %} :: {{ book.title }} - {% compressed_css 'book' %} - - {% compressed_js 'book' %} - - - - - {{ html|safe }} - + + + + +{% trans "Education module" %} + + + + + +{{html|safe}} + diff --git a/lib/librarian b/lib/librarian index 07e28ae2..9b253dcb 160000 --- a/lib/librarian +++ b/lib/librarian @@ -1 +1 @@ -Subproject commit 07e28ae2390b14db006b1ed55897e2f7a256b8cc +Subproject commit 9b253dcb10940e8c8d25a02059153d4c80469b79 diff --git a/redakcja/static/edumed/css/edumed.css b/redakcja/static/edumed/css/edumed.css new file mode 100644 index 00000000..d6da25f8 --- /dev/null +++ b/redakcja/static/edumed/css/edumed.css @@ -0,0 +1,460 @@ +body { + font-size: 16px; + font: Georgia, "Times New Roman", serif; + line-height: 1.5em; + margin: 0; +} + +a { + color: blue; + text-decoration: none; +} + +#book-text { + margin: 3em; + max-width: 500px; +} + +/* ================================== */ +/* = Header with logo and menu = */ +/* ================================== */ +#header { + margin: 3.4em 0 0 1.4em; +} + +img { + border: none; +} + +#logo { + font-size: 1.5em; +} +#logo a { + color: black; +} + +#menu { + position: fixed; + left: 0em; + top: 0em; + width: 100%; + height: 1.5em; + background: #333; + color: #FFF; + opacity: 0.9; + z-index: 99; +} + +#menu ul { + list-style: none; + padding: 0; + margin: 0; +} + +#menu li a { + display: block; + float: left; + height: 1.5em; + margin-left: 0.5em; + text-align: center; + color: #FFF; + padding: 0 1em; +} +#menu li a.menu { + padding-right: 1.5em; +} + +#menu li a.menu:hover, #menu li a.menu:active { + color: #000; + background: #FFF url(/static/img/arrow-down.png) no-repeat center right; +} + +#menu li a.menu.selected { + color: #000; + background: #FFF url(/static/img/arrow-up.png) no-repeat center right; +} +#menu a.menu-link { + display: block; + float: left; + height: 1.5em; + margin-left: 0.5em; + text-align: center; + color: #FFF; +} +#menu span { + color: #888; + font-style: italic; + font-size: .75em; + margin-right: 0.5em; +} + + +#toc, #themes, #nota_red, #info { + position: fixed; + left: 0em; + top: 1.5em; + width: 37em; + padding: 1.5em; + background: #FFF; + border-bottom: 0.25em solid #DDD; + border-right: 0.25em solid #DDD; + display: none; + height: 16em; + overflow-x: hidden; + overflow-y: auto; + opacity: 0.9; + z-index: 99; +} +#download { + position: fixed; + left: 0em; + top: 1.5em; + width: 37em; + padding: 1.5em; + background: #FFF; + border-bottom: 0.25em solid #DDD; + border-right: 0.25em solid #DDD; + display: none; + height: 10em; + overflow-x: hidden; + overflow-y: auto; + opacity: 0.9; + z-index: 99; +} + +#toc ol, #themes ol { + list-style: none; + padding: 0; + margin: 0; +} + +#toc ol li { + font-weight: bold; +} + +#toc ol ol { + padding: 0 0 1.5em 1.5em; + margin: 0; +} + +#toc ol ol li { + font-weight: normal; +} + +#toc h2 { + display: none; +} + +#toc .anchor { + float: none; + margin: 0; + color: blue; + font-size: 16px; + position: inherit; +} + +#info p { + text-align: justify; + margin: 1.5em 0 0; +} + +/* =================================================== */ +/* = Common elements: headings, paragraphs and lines = */ +/* =================================================== */ +h1 { + font-size: 3em; + margin: 1.5em 0; + text-align: center; + line-height: 1.5em; + font-weight: bold; +} + +h2 { + font-size: 2em; + margin: 1.5em 0 0; + font-weight: bold; + line-height: 1.5em; +} + +h3 { + font-size: 1.5em; + margin: 1.5em 0 0; + font-weight: normal; + line-height: 1.5em; +} + +h4 { + font-size: 1em; + margin: 1.5em 0 0; + line-height: 1.5em; +} + +p { + margin: 0; +} + +/* ======================== */ +/* = Footnotes and themes = */ +/* ======================== */ +.theme-begin { + border-left: 0.1em solid #DDDDDD; + color: #777; + padding: 0 0.5em; + width: 7.5em; + + font-style: normal; + font-weight: normal; + font-variant: normal; + letter-spacing: 0; + text-transform: none; + text-decoration: none; + + font-size: 16px; + float: right; + margin-right: -9.5em; + margin-bottom: 0.5em; + clear: both; + left: 40em; + line-height: 1.5em; + text-align: left; +} + +.annotation { + font-style: normal; + font-weight: normal; + font-size: 12px; + padding-left: 2px; + position: relative; + top: -4px; +} + +#footnotes { + margin-top: 3em; +} + +#footnotes .annotation { + display: block; + float: left; + width: 2.5em; + clear: both; +} + +#footnotes div { + margin: 1.5em 0 0 0; +} + +#footnotes p, #footnotes ul { + margin-left: 2.5em; + font-size: 0.875em; +} + +#footnotes .permalink { + font-size: .75em; +} + +blockquote { + font-size: 0.875em; +} + +/* ============= */ +/* = Numbering = */ +/* ============= */ +.verse, .paragraph { + position:relative; +} +.anchor { + position: absolute; + margin: -0.25em -0.5em; + left: -3em; + color: #777; + font-size: 12px; + width: 2em; + text-align: center; + padding: 0.25em 0.5em; + line-height: 1.5em; +} + +.anchor:hover, #book-text .anchor:active { + color: #FFF; + background-color: #CCC; +} + +/* =================== */ +/* = Custom elements = */ +/* =================== */ +span.author { + font-size: 0.5em; + display: block; + line-height: 1.5em; + margin-bottom: 0.25em; +} + +span.collection { + font-size: 0.375em; + display: block; + line-height: 1.5em; + margin-bottom: -0.25em; +} + +span.subtitle { + font-size: 0.5em; + display: block; + line-height: 1.5em; + margin-top: -0.25em; +} + +span.translator { + font-size: 0.375em; + display: block; + line-height: 1.5em; + margin-top: 0.25em; +} + +div.didaskalia { + font-style: italic; + margin: 0.5em 0 0 1.5em; +} + +div.kwestia { + margin: 0.5em 0 0; +} + +div.stanza { + margin: 1.5em 0 0; +} + +div.kwestia div.stanza { + margin: 0; +} + +p.paragraph { + text-align: justify; + margin: 1.5em 0 0; +} + +p.motto { + text-align: justify; + font-style: italic; + margin: 1.5em 0 0; +} + +p.motto_podpis { + font-size: 0.875em; + text-align: right; +} + +div.fragment { + border-bottom: 0.1em solid #999; + padding-bottom: 1.5em; +} + +div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph { + text-align: right; + font-style: italic; +} + +hr.spacer { + height: 3em; + visibility: hidden; +} + +hr.spacer-line { + margin: 1.5em 0; + border: none; + border-bottom: 0.1em solid #000; +} + +p.spacer-asterisk { + padding: 0; + margin: 1.5em 0; + text-align: center; +} + +div.person-list ol { + list-style: none; + padding: 0 0 0 1.5em; +} + +p.place-and-time { + font-style: italic; +} + +em.math, em.foreign-word, em.book-title, em.didaskalia { + font-style: italic; +} + +em.author-emphasis { + letter-spacing: 0.1em; +} + +em.person { + font-style: normal; + font-variant: small-caps; +} + +.verse:after { + content: "\feff"; +} + + +/* =================================== */ +/* = Hide some elements for printing = */ +/* =================================== */ + +@media print { + #menu {display: none;} +} + +.activity .text { + max-width:350px; + margin-right:20px; + float: left; +} + +.activity .description p:first-child { + margin-top: 0; +} + +.activity .info { + margin: 1.5em 0 0; + max-width: 130px; + float:right; +} + +.activity .info p { + margin-bottom: 1em; +} + + +.activity { + clear:both; +} + +.activity .info { + font-size: 10pt; +} + +.clearboth { + clear: both; +} + + +.excercise .buttons { + text-align: right; +} + +.teacher { + display: none; +} + +.teacher.show { + display: inherit; +} + +.question-piece.correct { + background-color: darkgreen; +} + +.question-piece.incorrect { + background-color: orange; +} \ No newline at end of file diff --git a/redakcja/static/edumed/js/edumed.coffee b/redakcja/static/edumed/js/edumed.coffee new file mode 100644 index 00000000..0afdae36 --- /dev/null +++ b/redakcja/static/edumed/js/edumed.coffee @@ -0,0 +1,103 @@ + +$ = jQuery + +class Binding + constructor: (@handler, @element) -> + $(@element).data(@handler, this) + + +class EduModule extends Binding + constructor: (element) -> + super 'edumodule', element + + $("[name=teacher-toggle]").change (ev) => + if $(ev.target).is(":checked") + $(".teacher", @element).addClass "show" + else + $(".teacher", @element).removeClass "show" + + + +class Excercise extends Binding + constructor: (element) -> + super 'excercise', element + + $(".check", @element).click => + @check() + $('.solutions', @element).click => + @show_solutions() + + +class Wybor extends Excercise + constructor: (element) -> + super element + + check: -> + scores = [] + $(".question").each (i, question) => + scores.push(@check_question question) + + score = [0, 0] + $.each scores, (i, s) -> + score[0] += s[0] + score[1] += s[1] + @show_score(score) + + check_question: (question) -> + all = 0 + good = 0 + solution = $(question).attr('data-solution').split(',').map($.trim).map((x)->parseInt(x)) + $(".question-piece", question).each (i, qpiece) => + piece_no = parseInt $(qpiece).attr 'data-no' + should_be_checked = solution.indexOf(piece_no) >= 0 + is_checked = $("input", qpiece).is(":checked") + + if should_be_checked + all += 1 + + if is_checked + if should_be_checked + good += 1 + @piece_correct qpiece + else + @piece_incorrect qpiece + else + $(qpiece).removeClass("correct,incorrect") + + return [good, all] + + piece_correct: (qpiece) -> + $(qpiece).removeClass('incorrect').addClass('correct') + + piece_incorrect: (qpiece) -> + $(qpiece).removeClass('correct').addClass('incorrect') + + show_solutions: -> + + + show_score: (score) -> + $(".message", @element).text("Wynik: #{score[0]} / #{score[1]}") + + + +########## + +excercise = (ele) -> + es = + 'wybor': Wybor + + cls = es[$(ele).attr('data-type')] + new cls(ele) + + +window.edumed = + 'EduModule': EduModule + + + + +$(document).ready () -> + new EduModule($("#book-text")) + + $(".excercise").each (i, el) -> + excercise(this) \ No newline at end of file diff --git a/redakcja/static/edumed/js/edumed.js b/redakcja/static/edumed/js/edumed.js new file mode 100644 index 00000000..3712f205 --- /dev/null +++ b/redakcja/static/edumed/js/edumed.js @@ -0,0 +1,151 @@ +// Generated by CoffeeScript 1.4.0 +(function() { + var $, Binding, EduModule, Excercise, Wybor, excercise, + __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; + + $ = jQuery; + + Binding = (function() { + + function Binding(handler, element) { + this.handler = handler; + this.element = element; + $(this.element).data(this.handler, this); + } + + return Binding; + + })(); + + EduModule = (function(_super) { + + __extends(EduModule, _super); + + function EduModule(element) { + var _this = this; + EduModule.__super__.constructor.call(this, 'edumodule', element); + $("[name=teacher-toggle]").change(function(ev) { + if ($(ev.target).is(":checked")) { + return $(".teacher", _this.element).addClass("show"); + } else { + return $(".teacher", _this.element).removeClass("show"); + } + }); + } + + return EduModule; + + })(Binding); + + Excercise = (function(_super) { + + __extends(Excercise, _super); + + function Excercise(element) { + var _this = this; + Excercise.__super__.constructor.call(this, 'excercise', element); + $(".check", this.element).click(function() { + return _this.check(); + }); + $('.solutions', this.element).click(function() { + return _this.show_solutions(); + }); + } + + return Excercise; + + })(Binding); + + Wybor = (function(_super) { + + __extends(Wybor, _super); + + function Wybor(element) { + Wybor.__super__.constructor.call(this, element); + } + + Wybor.prototype.check = function() { + var score, scores, + _this = this; + scores = []; + $(".question").each(function(i, question) { + return scores.push(_this.check_question(question)); + }); + score = [0, 0]; + $.each(scores, function(i, s) { + score[0] += s[0]; + return score[1] += s[1]; + }); + return this.show_score(score); + }; + + Wybor.prototype.check_question = function(question) { + var all, good, solution, + _this = this; + all = 0; + good = 0; + solution = $(question).attr('data-solution').split(',').map($.trim).map(function(x) { + return parseInt(x); + }); + $(".question-piece", question).each(function(i, qpiece) { + var is_checked, piece_no, should_be_checked; + piece_no = parseInt($(qpiece).attr('data-no')); + should_be_checked = solution.indexOf(piece_no) >= 0; + is_checked = $("input", qpiece).is(":checked"); + if (should_be_checked) { + all += 1; + } + if (is_checked) { + if (should_be_checked) { + good += 1; + return _this.piece_correct(qpiece); + } else { + return _this.piece_incorrect(qpiece); + } + } else { + return $(qpiece).removeClass("correct,incorrect"); + } + }); + return [good, all]; + }; + + Wybor.prototype.piece_correct = function(qpiece) { + return $(qpiece).removeClass('incorrect').addClass('correct'); + }; + + Wybor.prototype.piece_incorrect = function(qpiece) { + return $(qpiece).removeClass('correct').addClass('incorrect'); + }; + + Wybor.prototype.show_solutions = function() {}; + + Wybor.prototype.show_score = function(score) { + return $(".message", this.element).text("Wynik: " + score[0] + " / " + score[1]); + }; + + return Wybor; + + })(Excercise); + + excercise = function(ele) { + var cls, es; + es = { + 'wybor': Wybor + }; + cls = es[$(ele).attr('data-type')]; + return new cls(ele); + }; + + window.edumed = { + 'EduModule': EduModule + }; + + $(document).ready(function() { + new EduModule($("#book-text")); + return $(".excercise").each(function(i, el) { + return excercise(this); + }); + }); + +}).call(this); -- 2.20.1