From 3918842683580a7265e4420febb13aadf7604e35 Mon Sep 17 00:00:00 2001 From: prathamesh Date: Thu, 3 Jul 2014 17:31:19 +0530 Subject: Interface to create question paper --- testapp/static/exam/js/bootstrap-modal.js | 260 ++++++++++++++++++++++ testapp/static/exam/js/bootstrap-tabs.js | 80 +++++++ testapp/static/exam/js/question_paper_creation.js | 237 ++++++++++++++++++++ 3 files changed, 577 insertions(+) create mode 100644 testapp/static/exam/js/bootstrap-modal.js create mode 100644 testapp/static/exam/js/bootstrap-tabs.js create mode 100644 testapp/static/exam/js/question_paper_creation.js (limited to 'testapp/static/exam/js') diff --git a/testapp/static/exam/js/bootstrap-modal.js b/testapp/static/exam/js/bootstrap-modal.js new file mode 100644 index 0000000..b328217 --- /dev/null +++ b/testapp/static/exam/js/bootstrap-modal.js @@ -0,0 +1,260 @@ +/* ========================================================= + * bootstrap-modal.js v1.4.0 + * http://twitter.github.com/bootstrap/javascript.html#modal + * ========================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================= */ + + +!function( $ ){ + + "use strict" + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(document).ready(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + + /* MODAL PUBLIC CLASS DEFINITION + * ============================= */ + + var Modal = function ( content, options ) { + this.settings = $.extend({}, $.fn.modal.defaults, options) + this.$element = $(content) + .delegate('.close', 'click.modal', $.proxy(this.hide, this)) + + if ( this.settings.show ) { + this.show() + } + + return this + } + + Modal.prototype = { + + toggle: function () { + return this[!this.isShown ? 'show' : 'hide']() + } + + , show: function () { + var that = this + this.isShown = true + this.$element.trigger('show') + + escape.call(this) + backdrop.call(this, function () { + var transition = $.support.transition && that.$element.hasClass('fade') + + that.$element + .appendTo(document.body) + .show() + + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element.addClass('in') + + transition ? + that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : + that.$element.trigger('shown') + + }) + + return this + } + + , hide: function (e) { + e && e.preventDefault() + + if ( !this.isShown ) { + return this + } + + var that = this + this.isShown = false + + escape.call(this) + + this.$element + .trigger('hide') + .removeClass('in') + + $.support.transition && this.$element.hasClass('fade') ? + hideWithTransition.call(this) : + hideModal.call(this) + + return this + } + + } + + + /* MODAL PRIVATE METHODS + * ===================== */ + + function hideWithTransition() { + // firefox drops transitionEnd events :{o + var that = this + , timeout = setTimeout(function () { + that.$element.unbind(transitionEnd) + hideModal.call(that) + }, 500) + + this.$element.one(transitionEnd, function () { + clearTimeout(timeout) + hideModal.call(that) + }) + } + + function hideModal (that) { + this.$element + .hide() + .trigger('hidden') + + backdrop.call(this) + } + + function backdrop ( callback ) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + if ( this.isShown && this.settings.backdrop ) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('
') + .appendTo(document.body) + + if ( this.settings.backdrop != 'static' ) { + this.$backdrop.click($.proxy(this.hide, this)) + } + + if ( doAnimate ) { + this.$backdrop[0].offsetWidth // force reflow + } + + this.$backdrop.addClass('in') + + doAnimate ? + this.$backdrop.one(transitionEnd, callback) : + callback() + + } else if ( !this.isShown && this.$backdrop ) { + this.$backdrop.removeClass('in') + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) : + removeBackdrop.call(this) + + } else if ( callback ) { + callback() + } + } + + function removeBackdrop() { + this.$backdrop.remove() + this.$backdrop = null + } + + function escape() { + var that = this + if ( this.isShown && this.settings.keyboard ) { + $(document).bind('keyup.modal', function ( e ) { + if ( e.which == 27 ) { + that.hide() + } + }) + } else if ( !this.isShown ) { + $(document).unbind('keyup.modal') + } + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.modal = function ( options ) { + var modal = this.data('modal') + + if (!modal) { + + if (typeof options == 'string') { + options = { + show: /show|toggle/.test(options) + } + } + + return this.each(function () { + $(this).data('modal', new Modal(this, options)) + }) + } + + if ( options === true ) { + return modal + } + + if ( typeof options == 'string' ) { + modal[options]() + } else if ( modal ) { + modal.toggle() + } + + return this + } + + $.fn.modal.Modal = Modal + + $.fn.modal.defaults = { + backdrop: false + , keyboard: false + , show: false + } + + + /* MODAL DATA- IMPLEMENTATION + * ========================== */ + + $(document).ready(function () { + $('body').delegate('[data-controls-modal]', 'click', function (e) { + e.preventDefault() + var $this = $(this).data('show', true) + $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) + }) + }) + +}( window.jQuery || window.ender ); diff --git a/testapp/static/exam/js/bootstrap-tabs.js b/testapp/static/exam/js/bootstrap-tabs.js new file mode 100644 index 0000000..a3c7ee1 --- /dev/null +++ b/testapp/static/exam/js/bootstrap-tabs.js @@ -0,0 +1,80 @@ +/* ======================================================== + * bootstrap-tabs.js v1.4.0 + * http://twitter.github.com/bootstrap/javascript.html#tabs + * ======================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================== */ + + +!function( $ ){ + + "use strict" + + function activate ( element, container ) { + container + .find('> .active') + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + + element.addClass('active') + + if ( element.parent('.dropdown-menu') ) { + element.closest('li.dropdown').addClass('active') + } + } + + function tab( e ) { + var $this = $(this) + , $ul = $this.closest('ul:not(.dropdown-menu)') + , href = $this.attr('href') + , previous + , $href + + if ( /^#\w+/.test(href) ) { + e.preventDefault() + + if ( $this.parent('li').hasClass('active') ) { + return + } + + previous = $ul.find('.active a').last()[0] + $href = $(href) + + activate($this.parent('li'), $ul) + activate($href, $href.parent()) + + $this.trigger({ + type: 'change' + , relatedTarget: previous + }) + } + } + + + /* TABS/PILLS PLUGIN DEFINITION + * ============================ */ + + $.fn.tabs = $.fn.pills = function ( selector ) { + return this.each(function () { + $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) + }) + } + + $(document).ready(function () { + $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') + }) + +}( window.jQuery || window.ender ); diff --git a/testapp/static/exam/js/question_paper_creation.js b/testapp/static/exam/js/question_paper_creation.js new file mode 100644 index 0000000..a144540 --- /dev/null +++ b/testapp/static/exam/js/question_paper_creation.js @@ -0,0 +1,237 @@ +$(document).ready(function(){ + /* selectors for the 3 step tabs*/ + $fixed_tab = $("#fixed-tab"); + $random_tab = $("#random-tab"); + $finish_tab = $("#finish-tab"); + + $question_type = $("#id_question_type"); + $marks = $("#id_marks"); + + $total_marks = $("#total_marks"); + /* ajax requsts on selectors change */ + $question_type.change(function() { + $.ajax({ + url: "/exam/ajax/questionpaper/marks/", + type: "POST", + data: { + question_type: $question_type.val() + }, + dataType: "html", + success: function(output) { + $marks.html(output); + } + }); + }); + + $marks.change(function() { + var fixed_question_list = []; + var fixed_inputs = $("input[name=fixed]"); + var random_question_list = []; + var random_inputs = $("input[name=random]"); + for(var i = 0; i < fixed_inputs.length; i++){ + fixed_question_list.push($(fixed_inputs[i]).val()); + } + for(var i = 0; i < random_inputs.length; i++){ + random_question_list.push($(random_inputs[i]).val()); + } + $.ajax({ + url: "/exam/ajax/questionpaper/questions/", + type: "POST", + data: { + question_type: $question_type.val(), + marks: $marks.val(), + fixed_list: fixed_question_list, + random_list: random_question_list + }, + dataType: "html", + success: function(output) { + if($fixed_tab.hasClass("active")) { + var questions = $(output).filter("#questions").html(); + $("#fixed-available").html(questions); + } else if($random_tab.hasClass("active")) { + var questions = $(output).filter("#questions").html(); + var numbers = $(output).filter("#num").html(); + $("#random-available").html(questions); + $("#number-wrapper").html(numbers); + } + } + }); + }); + + /* adding fixed questions */ + $("#add-fixed").click(function(e) { + var count = 0; + var selected = []; + var html = ""; + var $element; + var total_marks = parseFloat($total_marks.text()); + var marks_per = parseFloat($marks.val()) + $("#fixed-available input:checkbox").each(function(index, element) { + if($(this).attr("checked")) { + qid = $(this).attr("data-qid"); + if(!$(this).hasClass("ignore")) { + selected.push(qid); + $element = $("
"); + html += "
  • " + $(this).next().html() + "
    • "; + count++; + } + } + }); + html = ""; + selected = selected.join(","); + var $input = $(""); + $input.attr({ + value: selected, + name: "fixed" + }); + $remove = $("×
    "); + $element.html(count + " question(s) added").append(html).append($input).append($remove); + $("#fixed-added").prepend($element); + total_marks = total_marks + count * marks_per; + $total_marks.text(total_marks) + e.preventDefault(); + }); + + /* adding random questions */ + $("#add-random").click(function(e) { + $numbers = $("#numbers"); + random_number = $numbers.val() + if($numbers.val()) { + $numbers.removeClass("red-alert"); + var count = 0; + var selected = []; + var html = ""; + var $element; + var total_marks = parseFloat($total_marks.text()); + var marks_per = parseFloat($marks.val()) + $("#random-available input:checkbox").each(function(index, element) { + if($(this).attr("checked")) { + qid = $(this).attr("data-qid"); + if(!$(this).hasClass("ignore")) { + selected.push(qid); + $element = $("
    "); + html += "
  • " + $(this).next().html() + "
    • "; + count++; + } + } + }); + html = ""; + selected = selected.join(","); + var $input_random = $(""); + $input_random.attr({ + value: selected, + name: "random" + }); + var $input_number = $(""); + $input_number.attr({ + value: $numbers.val(), + name: "number" + }); + $remove = $("    ×"); + $element.html(random_number + " question(s) will be selected from " + count + " question(s)").append(html).append($input_random).append($input_number).append($remove); + $("#random-added").prepend($element); + total_marks = total_marks + random_number * marks_per; + $total_marks.text(total_marks) + } else { + $numbers.addClass("red-alert"); + } + e.preventDefault(); + }); + + /* removing added questions */ + $(".qcard .remove").live("click", function(e) { + var marks_per = $(this).attr('data-marks'); + var num_question = $(this).attr('data-num'); + var sub_marks = marks_per*num_question; + var total_marks = parseFloat($total_marks.text()); + total_marks = total_marks - sub_marks; + $total_marks.text(total_marks); + + $(this).parent().slideUp("normal", function(){ $(this).remove(); }); + e.preventDefault(); + }); + + /* showing/hiding selectors on tab click */ + $(".tabs li").click(function() { + if($(this).attr("id") == "finish-tab") { + $("#selectors").hide(); + } else { + $question_type.val('select'); + $marks.val('select') + $("#selectors").show(); + } + }); + /* check all questions on checked*/ + $("#checkall").live("click", function(){ + if($(this).attr("checked")) { + if($("#fixed-tab").hasClass("active")) { + $("#fixed-available input:checkbox").each(function(index, element) { + $(this).attr('checked','checked'); + }); + } + else { + $("#random-available input:checkbox").each(function(index, element) { + $(this).attr('checked','checked'); + }); + } + } + else { + if($("#fixed-tab").hasClass("active")) { + $("#fixed-available input:checkbox").each(function(index, element) { + $(this).removeAttr('checked'); + }); + } + else { + $("#random-available input:checkbox").each(function(index, element) { + $(this).removeAttr('checked'); + }); + } + } + }); + + /* show preview on preview click */ + $("#preview").click(function(){ + questions = getQuestions() + if(questions.trim() == ""){ + $('#modal_body').html("No questions selected"); + } + else { + $('#modal_body').html(questions); + } + $("#myModal").modal('show'); + }); + + /* tab change on next or previous button click */ + $("#fixed-next").click(function(){ + $("#random").click(); + }); + $("#random-next").click(function(){ + $("#finished").click(); + }); + + $("#random-prev").click(function(){ + $("#fixed").click(); + }); + + $("#finish-prev").click(function(){ + $("#random").click(); + }); + + /* Check at least one question is present before saving */ + $('#save').click(function(){ + questions = getQuestions(); + if(questions.trim() == ""){ + $("#modalSave").modal("show"); + } + else { + document.forms["frm"].submit(); + } + }); + + /* Fetch selected questions */ + function getQuestions(){ + var fixed_div = $("#fixed-added").html(); + var random_div = $("#random-added").html(); + return fixed_div+random_div; + } +}); //document -- cgit