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/css/base.css                   | 315 ++++++++++++++++++++-
 .../static/exam/css/question_paper_creation.css    | 119 ++++++++
 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 ++++++++++++++++
 5 files changed, 1008 insertions(+), 3 deletions(-)
 create mode 100644 testapp/static/exam/css/question_paper_creation.css
 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')

diff --git a/testapp/static/exam/css/base.css b/testapp/static/exam/css/base.css
index c822f4d..d3a0a0a 100644
--- a/testapp/static/exam/css/base.css
+++ b/testapp/static/exam/css/base.css
@@ -295,7 +295,7 @@ a:hover {
   width: 160px;
 }
 .span4 {
-  min-height : 500px;
+/*  min-height : 500px; */
   width: 220px;
 }
 .span5 {
@@ -1898,7 +1898,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-.close {
+/*.close {
   float: right;
   color: #000000;
   font-size: 20px;
@@ -1917,7 +1917,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -khtml-opacity: 0.4;
   -moz-opacity: 0.4;
   opacity: 0.4;
-}
+}*/
 .alert-message {
   position: relative;
   padding: 7px 15px;
@@ -2045,4 +2045,313 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .label.notice {
   background-color: #62cffc;
 }
+.well {
+  background-color: #f5f5f5;
+  margin-bottom: 20px;
+  padding: 19px;
+  min-height: 20px;
+  border: 1px solid #eee;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+.well blockquote {
+  border-color: #ddd;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.modal-backdrop {
+  background-color: #000000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+}
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop, .modal-backdrop.fade.in {
+  filter: alpha(opacity=80);
+  -khtml-opacity: 0.8;
+  -moz-opacity: 0.8;
+  opacity: 0.8;
+}
+/*
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 11000;
+  width: 560px;
+  margin: -250px 0 0 -280px;
+  background-color: #ffffff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.modal .close {
+  margin-top: 7px;
+}
+.modal.fade {
+  -webkit-transform-style: preserve-3d;
+  -webkit-transition: opacity .3s linear, top .3s ease-out;
+  -moz-transition: opacity .3s linear, top .3s ease-out;
+  -ms-transition: opacity .3s linear, top .3s ease-out;
+  -o-transition: opacity .3s linear, top .3s ease-out;
+  transition: opacity .3s linear, top .3s ease-out;
+  top: -25%;
+}
+.modal.fade.in {
+  top: 50%;
+}
+.modal-header {
+  border-bottom: 1px solid #eee;
+  padding: 5px 15px;
+}
+.modal-body {
+  padding: 15px;
+}
+.modal-body form {
+  margin-bottom: 0;
+}
+.modal-footer {
+  background-color: #f5f5f5;
+  padding: 14px 15px 15px;
+  border-top: 1px solid #ddd;
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 #ffffff;
+  box-shadow: inset 0 1px 0 #ffffff;
+  zoom: 1;
+  margin-bottom: 0;
+}
+.modal-footer:before, .modal-footer:after {
+  display: table;
+  content: "";
+  zoom: 1;
+}
+.modal-footer:after {
+  clear: both;
+}
+.modal-footer .btn {
+  float: right;
+  margin-left: 5px;
+}
+.modal .popover, .modal .twipsy {
+  z-index: 12000;
+}
+*/
+.modal {
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  z-index: 1050;
+  width: 560px;
+  margin-left: -280px;
+  background-color: #ffffff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  outline: none;
+  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding-box;
+          background-clip: padding-box;
+}
+.modal.fade {
+  top: -25%;
+  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
+     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
+       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
+          transition: opacity 0.3s linear, top 0.3s ease-out;
+}
+
+.modal.fade.in {
+  top: 10%;
+}
+
+.modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-header .close {
+  margin-top: 2px;
+}
+
+.modal-header h3 {
+  margin: 0;
+  line-height: 30px;
+}
+
+.modal-body {
+  position: relative;
+  max-height: 400px;
+  padding: 15px;
+  overflow-y: auto;
+}
+
+.modal-form {
+  margin-bottom: 0;
+}
+
+.modal-footer {
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  -webkit-border-radius: 0 0 6px 6px;
+     -moz-border-radius: 0 0 6px 6px;
+          border-radius: 0 0 6px 6px;
+  *zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+     -moz-box-shadow: inset 0 1px 0 #ffffff;
+          box-shadow: inset 0 1px 0 #ffffff;
+}
+
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.modal-footer:after {
+  clear: both;
+}
 
+.modal-footer .btn + .btn {
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+.modal-footer .btn-group .btn + .btn {
+  margin-left: -1px;
+}
+
+.modal-footer .btn-block + .btn-block {
+  margin-left: 0;
+}
+.tabs, .pills {
+  margin: 0 0 18px;
+  padding: 0;
+  list-style: none;
+  zoom: 1;
+}
+.tabs:before,
+.pills:before,
+.tabs:after,
+.pills:after {
+  display: table;
+  content: "";
+  zoom: 1;
+}
+.tabs:after, .pills:after {
+  clear: both;
+}
+.tabs > li, .pills > li {
+  float: left;
+}
+.tabs > li > a, .pills > li > a {
+  display: block;
+}
+.tabs {
+  border-color: #ddd;
+  border-style: solid;
+  border-width: 0 0 1px;
+}
+.tabs > li {
+  position: relative;
+  margin-bottom: -1px;
+}
+.tabs > li > a {
+  padding: 0 15px;
+  margin-right: 2px;
+  line-height: 23px;
+  border: 1px solid transparent;
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.tabs > li > a:hover {
+  text-decoration: none;
+  background-color: #eee;
+  border-color: #eee #eee #ddd;
+}
+.tabs .active > a, .tabs .active > a:hover {
+  color: #808080;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+.tabs .menu-dropdown, .tabs .dropdown-menu {
+  top: 35px;
+  border-width: 1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
+.tabs a.menu:after, .tabs .dropdown-toggle:after {
+  border-top-color: #999;
+  margin-top: 15px;
+  margin-left: 5px;
+}
+.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
+  border-color: #999;
+}
+.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
+  border-top-color: #555;
+}
+.pills a {
+  margin: 5px 3px 5px 0;
+  padding: 0 15px;
+  line-height: 30px;
+  text-shadow: 0 1px 1px #ffffff;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+}
+.pills a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: #00438a;
+}
+.pills .active a {
+  color: #ffffff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: #0069d6;
+}
+.pills-vertical > li {
+  float: none;
+}
+.tab-content > .tab-pane, .pill-content > .pill-pane {
+  display: none;
+}
+.tab-content > .active, .pill-content > .active {
+  display: block;
+}
diff --git a/testapp/static/exam/css/question_paper_creation.css b/testapp/static/exam/css/question_paper_creation.css
new file mode 100644
index 0000000..c915320
--- /dev/null
+++ b/testapp/static/exam/css/question_paper_creation.css
@@ -0,0 +1,119 @@
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 18px;
+  color: #404040;
+}
+.clearfix {
+    clear: both;
+}
+.tabs li {
+    text-align: center;
+    width: 33%;
+}
+.tabs li:last-child {
+    width: 34%;
+}
+.tabs > .active > a {
+    border: 0;
+    background: lightgreen;
+}
+.tabs > .active > a:hover {
+    border: 0;
+    background: green;
+    color: #ffffff;
+}
+.tabs li a {
+    border-radius: 0;
+    margin-right: 0;
+}
+.tabs {
+    border: 1px solid #ddd;
+}
+#progress {
+    background: red;
+}
+#content-left{
+    text-align: center;
+    background: grey;
+}
+#content-right{
+    text-align: center;
+    background: grey;
+}
+#selectors {
+    margin-left: 0;
+    background: #fafafa;
+    padding: 7px 0;
+    border: 2px solid #f5f5f5;
+}
+#selectors .span4 {
+    margin-left: 0;
+}
+#id_question_type {
+    width: 100%;
+}
+#id_marks {
+    width: 100%;
+}
+#fixed-questions .span7 > div,
+#random-questions .span7 > div{
+    background: #f5f5f5;
+    height: 200px;
+    border: 1px solid #333333;
+    padding: 5px;
+}
+#fixed-available,
+#random-available {
+    height: 125px;
+    min-height: 125px;
+    overflow-y: scroll;
+    margin-bottom: 15px;
+}
+#fixed-added,
+#random-added {
+    height: 160px;
+    overflow-y: scroll;
+}
+#fixed-added hr,
+#random-added hr {
+    margin: 5px 0 4px;
+}
+.qcard {
+    position: relative;
+    background: #ffffff;
+    padding: 5px;
+    margin: 5px 5px;
+    box-shadow: 1px 1px 5px #cccccc;
+    -webkit-box-shadow: 1px 1px 5px #cccccc;
+    -moz-box-shadow: 1px 1px 5px #cccccc;
+    -o-box-shadow: 1px 1px 5px #cccccc;
+}
+.qcard ul {
+    margin-bottom: 5px;
+}
+.qcard .remove {
+    position: absolute;
+
+    top: 3px;
+    right: 3px;
+    padding: 1px 3px;
+    text-decoration: none;
+    color: #ffffff;
+    background: #ff4136;
+    border-radius: 3px;
+    font-weight: bold;
+}
+.qcard .remove:hover {
+    background: #333333;
+}
+.red-alert {
+    border: 2px solid red;
+}
+#myModal .qcard .remove{
+    display: none;
+}
+.well{
+    padding: 5px;
+}
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 = $('<div class="modal-backdrop ' + animate + '" />')
+        .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 = $("<div class='qcard'></div>");
+                    html += "<li>" + $(this).next().html() + "</li>";
+                    count++;
+                }
+            }
+        });
+        html = "<ul>" + html + "</ul>";
+        selected = selected.join(",");
+        var $input = $("<input type='hidden'>");
+        $input.attr({
+            value: selected,
+            name: "fixed"
+        });
+        $remove = $("<a href='#' class='remove' data-num="+count+" data-marks = "+marks_per +">&times;</div>");
+        $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 = $("<div class='qcard'></div>");
+                        html += "<li>" + $(this).next().html() + "</li>";
+                        count++;
+                    }
+                }
+            });
+            html = "<ul>" + html + "</ul>";
+            selected = selected.join(",");
+            var $input_random = $("<input type='hidden'>");
+            $input_random.attr({
+                value: selected,
+                name: "random"
+            });
+            var $input_number = $("<input type='hidden'>");
+            $input_number.attr({
+                value: $numbers.val(),
+                name: "number"
+            });
+            $remove = $("<a href='#' class='remove' data-num="+random_number+" data-marks = "+marks_per +">&times;</div>");
+            $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