Commit ce05fc8836ed9230f2c879019a7b95de6dca9a38

Authored by Julio Toscano
Committed by GitHub
2 parents 990646cb 4c0de3c9

Merge pull request #422 from amadeusproject/exam_page

modifying modal-exam for panel-exam #362
courses/templates/subject/create.html
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 4
5 {% block breadcrumbs %} 5 {% block breadcrumbs %}
6 {{ block.super }} 6 {{ block.super }}
7 - {% breadcrumb 'Create subject' 'course:create_subject' %} 7 + {% breadcrumb 'Create subject' 'course:create_subject' %}
8 {% endblock breadcrumbs %} 8 {% endblock breadcrumbs %}
9 9
10 {% block content %} 10 {% block content %}
courses/templates/subject/form_view_teacher.html
@@ -103,7 +103,7 @@ @@ -103,7 +103,7 @@
103 <li><a href="javascript:createForum('{% url 'course:forum:create' %}', '{{ topic.id }}')">{% trans 'Create Forum' %}</a></li> 103 <li><a href="javascript:createForum('{% url 'course:forum:create' %}', '{{ topic.id }}')">{% trans 'Create Forum' %}</a></li>
104 <li><a href="javascript:modal.get('{% url 'course:poll:create_poll' topic.slug%}','#poll','#requisicoes_ajax');">{% trans 'Create Poll' %}</a></li> 104 <li><a href="javascript:modal.get('{% url 'course:poll:create_poll' topic.slug%}','#poll','#requisicoes_ajax');">{% trans 'Create Poll' %}</a></li>
105 <li><a href="javascript:modal.get('{% url 'course:exercise:create_exercise' topic.slug %}', '#createExercisesModal','#requisicoes_ajax')">{% trans 'Delivery Material' %}</a></li> 105 <li><a href="javascript:modal.get('{% url 'course:exercise:create_exercise' topic.slug %}', '#createExercisesModal','#requisicoes_ajax')">{% trans 'Delivery Material' %}</a></li>
106 - <li><a href="javascript:modal.get('{% url 'course:exam:create_exam' topic.slug%}','#exam','#requisicoes_ajax');">{% trans 'Create exam' %}</a></li> 106 + <li><a href="{% url 'course:exam:create_exam' topic.slug %}">{% trans 'Create exam' %}</a></li>
107 </ul> 107 </ul>
108 </div> 108 </div>
109 </div> 109 </div>
exam/static/js/Exam.js 0 → 100644
@@ -0,0 +1,146 @@ @@ -0,0 +1,146 @@
  1 +//Insert Create select with question type
  2 + var idQuestionType = 1;
  3 + $("#addQuestion").on("click", function(event){
  4 + var element =
  5 + '<div class="row form-group" id="questionType_' + idQuestionType +'">' +
  6 + '<label for="questionType" class="col-md-2 control-label">' +
  7 + '{% trans "Question Type" %}</label>' + '<div class="col-md-10">' +
  8 + '<select id="questionType'+ idQuestionType +'" class="form-control" name="option_question" onchange="showDiv (this, '+ idQuestionType +')">' +
  9 + '<option selected disabled>{% trans "Question Type" %}</option>' +
  10 + '<option value="0">{% trans "Multiple Choice" %}</option>' +
  11 + '<option value="1">{% trans "True or False" %}</option>' +
  12 + '<option value="2">{% trans "Gap Filling" %}</option>' +
  13 + '<option value="3">{% trans "Discursive Question" %}</option>' +
  14 + '</select>' +
  15 + '</div>' +
  16 + '</div>' + '<hr id="hr_'+idQuestionType+'">'
  17 + ;
  18 + if (idQuestionType == 1){
  19 + $(element).insertAfter('#buttonAddQuestion');
  20 + }else{
  21 + var idhr = '#hr_'+(idQuestionType-1);
  22 + $(element).insertAfter(idhr);
  23 + }
  24 + idQuestionType++;
  25 + })
  26 +
  27 + //Insert question choice
  28 + function showDiv (elem, questionType_id) {
  29 + if (elem.value == 0) {
  30 + var questionChoice =
  31 + '<div id="questionChoice_'+questionType_id+'">' +
  32 + '<div class="row form-group">'+
  33 + '<label for="question-name" class="col-md-2 control-label">Question</label>'+
  34 + '<div class="col-md-10">'+
  35 + '<textarea class="form-control" rows="1" id="question-name" placeholder="Wording"></textarea>'+
  36 + '</div>'+
  37 + '</div>'+
  38 + '<div class="row form-group">'+
  39 + '<label for="alternatives" class="col-md-2 control-label">Alternatives</label>'+
  40 + '<div class="col-md-10" id="radios_'+questionType_id+'">'+
  41 + '<div class="radio radio-primary form-group">'+
  42 + '<label>'+
  43 + '<input checked type="radio" name="multiple-choice" id="alternative1" value="1">'+
  44 + '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+
  45 + '</label>'+
  46 + '</div>'+
  47 + '<div class="radio radio-primary form-group">'+
  48 + '<label>'+
  49 + '<input type="radio" name="multiple-choice" id="alternative2" value="2">'+
  50 + '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+
  51 + '</label>'+
  52 + '</div>'+
  53 + '</div>'+
  54 + '</div>'+
  55 + '<div class="row form-group">'+
  56 + '<button type="button" class="btn btn-raised btn-primary" id="newAlternative_'+questionType_id+'" onclick="functionNewAlternative(radios_'+questionType_id+')">New Alternative</button>'+
  57 + '</div>'+
  58 + '</div>';
  59 + } else if (elem.value == 1) {
  60 + var questionChoice =
  61 + '<div id="questionChoice_'+questionType_id+'">'+
  62 + '<div class="row form-group">'+
  63 + '<label for="question-name" class="col-md-2 control-label">Question True or False</label>'+
  64 + '<div class="col-md-10">'+
  65 + '<textarea class="form-control" rows="1" id="question-name" placeholder="Wording"></textarea>'+
  66 + '</div>'+
  67 + '</div>'+
  68 + '<div class="row form-group">'+
  69 + '<label for="alternative" class="col-md-2 control-label">Alternatives: T/F</label>'+
  70 + '<div class="col-md-10" id="radiosTF_'+questionType_id+'">'+
  71 + '<div class="radio form-group" value="1">'+
  72 + '<div class="radio">'+
  73 + '<label>'+
  74 + '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+
  75 + '</label>'+
  76 + '<label>'+
  77 + '<input type="radio" name="true-or-false-1" value="T">'+
  78 + '</label>'+
  79 + '<label>'+
  80 + '<input type="radio" name="true-or-false-1" value="F">'+
  81 + '</label>'+
  82 + '</div>'+
  83 + '</div>'+
  84 + '<div class="radio form-group" value="2">'+
  85 + '<label>'+
  86 + '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+
  87 + '</label>'+
  88 + '<label>'+
  89 + '<input type="radio" name="true-or-false-2" value="T">'+
  90 + '</label>'+
  91 + '<label>'+
  92 + '<input type="radio" name="true-or-false-2" value="F">'+
  93 + '</label>'+
  94 + '</div>'+
  95 + '</div>'+
  96 + '</div>'+
  97 + '<div class="row form-group">'+
  98 + '<button type="button" class="btn btn-raised btn-primary" id="newAlternative_'+questionType_id+'" onclick="functionNewAlternativeTF(radiosTF_'+questionType_id+')">New Alternative</button>'+
  99 + '</div>'+
  100 + '</div>';
  101 + } else if (elem.value == 3) {
  102 + var questionChoice =
  103 + '<div id="questionChoice_'+questionType_id+'">'+
  104 + '<div class="row form-group">'+
  105 + '<label for="question-name" class="col-md-2 control-label">Name Question discursive</label>'+
  106 + '<div class="col-md-10">'+
  107 + '<textarea class="form-control" rows="2" id="question" placeholder="Wording"></textarea>'+
  108 + '</div>'+
  109 + '</div>'+
  110 + '</div>';
  111 + }
  112 + if(document.getElementById('questionChoice_'+ questionType_id)){
  113 + $('#questionChoice_'+ questionType_id).detach();
  114 + }
  115 + $(questionChoice).insertBefore('#hr_'+questionType_id);
  116 + $.material.init() //O material deve ser iniciado aqui para funcionar os botoes de radio.
  117 + }
  118 +//Bug quando criamos sem ser na ordem
  119 +function functionNewAlternative(Question_Id){
  120 + var alternative = parseInt($("div input").last().val()) + 1;
  121 + var element = '<div class="radio radio-primary form-group">' +
  122 + '<label>' +
  123 + '<input type="radio" name="alternatives" id="alternative_'+alternative+'_'+Question_Id+'"' + 'value="'+alternative+'">' +
  124 + '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>' +
  125 + '</label>'+
  126 + '</div>';
  127 + $(Question_Id).append(element);
  128 + $.material.init() //O material deve ser iniciado aqui para funcionar os botoes de radio.
  129 +}
  130 +function functionNewAlternativeTF(Question_Id){
  131 + var alternative = parseInt($("div").last().val()) + 1;
  132 + var element =
  133 + '<div class="radio form-group">'+
  134 + '<label>'+
  135 + '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+
  136 + '</label>'+
  137 + '<label>'+
  138 + '<input type="radio" name="true-or-false-2" value="T">'+
  139 + '</label>'+
  140 + '<label>'+
  141 + '<input type="radio" name="true-or-false-2" value="F">'+
  142 + '</label>'+
  143 + '</div>';
  144 + $(Question_Id).append(element);
  145 + $.material.init() //O material deve ser iniciado aqui para funcionar os botoes de radio.
  146 +}
0 \ No newline at end of file 147 \ No newline at end of file
exam/static/js/modalExam.js
@@ -1,147 +0,0 @@ @@ -1,147 +0,0 @@
1 -  
2 -//Insert Create select with question type  
3 - var idQuestionType = 1;  
4 - $("#addQuestion").on("click", function(event){  
5 - var element =  
6 - '<div class="row form-group" id="questionType_' + idQuestionType +'">' +  
7 - '<label for="questionType" class="col-md-2 control-label">' +  
8 - '{% trans "Question Type" %}</label>' + '<div class="col-md-10">' +  
9 - '<select id="questionType'+ idQuestionType +'" class="form-control" name="option_question" onchange="showDiv (this, '+ idQuestionType +')">' +  
10 - '<option selected disabled>{% trans "Question Type" %}</option>' +  
11 - '<option value="0">{% trans "Multiple Choice" %}</option>' +  
12 - '<option value="1">{% trans "True or False" %}</option>' +  
13 - '<option value="2">{% trans "Gap Filling" %}</option>' +  
14 - '<option value="3">{% trans "Discursive Question" %}</option>' +  
15 - '</select>' +  
16 - '</div>' +  
17 - '</div>' + '<hr id="hr_'+idQuestionType+'">'  
18 - ;  
19 - if (idQuestionType == 1){  
20 - $(element).insertAfter('#buttonAddQuestion');  
21 - }else{  
22 - var idhr = '#hr_'+(idQuestionType-1);  
23 - $(element).insertAfter(idhr);  
24 - }  
25 - idQuestionType++;  
26 - })  
27 -  
28 - //Insert question choice  
29 - function showDiv (elem, questionType_id) {  
30 - if (elem.value == 0) {  
31 - var questionChoice =  
32 - '<div id="questionChoice_'+questionType_id+'">' +  
33 - '<div class="row form-group">'+  
34 - '<label for="question-name" class="col-md-2 control-label">Question</label>'+  
35 - '<div class="col-md-10">'+  
36 - '<textarea class="form-control" rows="1" id="question-name" placeholder="Wording"></textarea>'+  
37 - '</div>'+  
38 - '</div>'+  
39 - '<div class="row form-group">'+  
40 - '<label for="alternatives" class="col-md-2 control-label">Alternatives</label>'+  
41 - '<div class="col-md-10" id="radios_'+questionType_id+'">'+  
42 - '<div class="radio radio-primary form-group">'+  
43 - '<label>'+  
44 - '<input checked type="radio" name="multiple-choice" id="alternative1" value="1">'+  
45 - '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+  
46 - '</label>'+  
47 - '</div>'+  
48 - '<div class="radio radio-primary form-group">'+  
49 - '<label>'+  
50 - '<input type="radio" name="multiple-choice" id="alternative2" value="2">'+  
51 - '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+  
52 - '</label>'+  
53 - '</div>'+  
54 - '</div>'+  
55 - '</div>'+  
56 - '<div class="form-group">'+  
57 - '<button type="button" class="btn btn-raised btn-primary" id="newAlternative_'+questionType_id+'" onclick="functionNewAlternative(radios_'+questionType_id+')">New Alternative</button>'+  
58 - '</div>'+  
59 - '</div>';  
60 - } else if (elem.value == 1) {  
61 - var questionChoice =  
62 - '<div id="questionChoice_'+questionType_id+'">'+  
63 - '<div class="row form-group">'+  
64 - '<label for="question-name" class="col-md-2 control-label">Question True or False</label>'+  
65 - '<div class="col-md-10">'+  
66 - '<textarea class="form-control" rows="1" id="question-name" placeholder="Wording"></textarea>'+  
67 - '</div>'+  
68 - '</div>'+  
69 - '<div class="row form-group">'+  
70 - '<label for="alternative" class="col-md-2 control-label">Alternatives: T/F</label>'+  
71 - '<div class="col-md-10" id="radiosTF_'+questionType_id+'">'+  
72 - '<div class="radio form-group" value="1">'+  
73 - '<div class="radio">'+  
74 - '<label>'+  
75 - '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+  
76 - '</label>'+  
77 - '<label>'+  
78 - '<input type="radio" name="true-or-false-1" value="T">'+  
79 - '</label>'+  
80 - '<label>'+  
81 - '<input type="radio" name="true-or-false-1" value="F">'+  
82 - '</label>'+  
83 - '</div>'+  
84 - '</div>'+  
85 - '<div class="radio form-group" value="2">'+  
86 - '<label>'+  
87 - '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+  
88 - '</label>'+  
89 - '<label>'+  
90 - '<input type="radio" name="true-or-false-2" value="T">'+  
91 - '</label>'+  
92 - '<label>'+  
93 - '<input type="radio" name="true-or-false-2" value="F">'+  
94 - '</label>'+  
95 - '</div>'+  
96 - '</div>'+  
97 - '</div>'+  
98 - '<div class="form-group">'+  
99 - '<button type="button" class="btn btn-raised btn-primary" id="newAlternative_'+questionType_id+'" onclick="functionNewAlternativeTF(radiosTF_'+questionType_id+')">New Alternative</button>'+  
100 - '</div>'+  
101 - '</div>';  
102 - } else if (elem.value == 3) {  
103 - var questionChoice =  
104 - '<div id="questionChoice_'+questionType_id+'">'+  
105 - '<div class="row form-group">'+  
106 - '<label for="question-name" class="col-md-2 control-label">Name Question discursive</label>'+  
107 - '<div class="col-md-10">'+  
108 - '<textarea class="form-control" rows="2" id="question" placeholder="Wording"></textarea>'+  
109 - '</div>'+  
110 - '</div>'+  
111 - '</div>';  
112 - }  
113 - if(document.getElementById('questionChoice_'+ questionType_id)){  
114 - $('#questionChoice_'+ questionType_id).detach();  
115 - }  
116 - $(questionChoice).insertBefore('#hr_'+questionType_id);  
117 - $.material.init() //O material deve ser iniciado aqui para funcionar os botoes de radio.  
118 - }  
119 -//Bug quando criamos sem ser na ordem  
120 -function functionNewAlternative(Question_Id){  
121 - var alternative = parseInt($("div input").last().val()) + 1;  
122 - var element = '<div class="radio radio-primary form-group">' +  
123 - '<label>' +  
124 - '<input type="radio" name="alternatives" id="alternative_'+alternative+'_'+Question_Id+'"' + 'value="'+alternative+'">' +  
125 - '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>' +  
126 - '</label>'+  
127 - '</div>';  
128 - $(Question_Id).append(element);  
129 - $.material.init() //O material deve ser iniciado aqui para funcionar os botoes de radio.  
130 -}  
131 -function functionNewAlternativeTF(Question_Id){  
132 - var alternative = parseInt($("div").last().val()) + 1;  
133 - var element =  
134 - '<div class="radio form-group">'+  
135 - '<label>'+  
136 - '<textarea class="form-control" rows="1" placeholder="Write your alternative"></textarea>'+  
137 - '</label>'+  
138 - '<label>'+  
139 - '<input type="radio" name="true-or-false-2" value="T">'+  
140 - '</label>'+  
141 - '<label>'+  
142 - '<input type="radio" name="true-or-false-2" value="F">'+  
143 - '</label>'+  
144 - '</div>';  
145 - $(Question_Id).append(element);  
146 - $.material.init() //O material deve ser iniciado aqui para funcionar os botoes de radio.  
147 -}  
148 \ No newline at end of file 0 \ No newline at end of file
exam/templates/exam/create.html
  1 +{% extends 'subject/index.html' %}
1 2
2 -{% load i18n widget_tweaks dict_access static%} 3 +{% load i18n widget_tweaks static django_bootstrap_breadcrumbs %}
3 4
4 -{# {% block style %} #}  
5 - <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
6 - <script src="{% static 'js/modalExam.js' %}"></script>  
7 - <!-- Init material Bootstrap -->  
8 - <script type="text/javascript">$.material.init()</script><!-- O botao radio volta a funcionar quando coloco essa função-->  
9 -{# {% endblock %} #} 5 +{% block breadcrumbs %}
  6 + {{ block.super }}
  7 + {% breadcrumb 'Create exam' 'course:create_exam' %}
  8 +{% endblock breadcrumbs %}
10 9
11 {% block content %} 10 {% block content %}
12 -<!-- Modal (remember to change the ids!!!) -->  
13 -<div class="modal fade" id="exam" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
14 - <div class="modal-dialog" role="document">  
15 - <div class="modal-content">  
16 -  
17 - <!-- Modal Header -->  
18 - <div class="modal-header">  
19 -  
20 - {% block title_exam %}  
21 - <!-- Put your title here!!! -->  
22 - <h4 class="modal-title" id="myModalLabel">{% trans "Create a Exam" %}</h4>  
23 - {% endblock title_exam %} 11 +<div class="panel panel-primary">
  12 + <div class="panel-heading">
  13 + <h4 class="panel-title" id="exam-title">{% trans "Create a Exam" %}</h4>
  14 + </div>
  15 + <div class="panel-body">
  16 + <div class="row form-group">
  17 + <label for="exam_name" class="col-md-2 control-label">{% trans "Exam Name" %}</label>
  18 + <div class="col-md-10">
  19 + <input type="text" name="exam_name" class="form-control" id="exam_name" placeholder="{% trans 'Exam Name' %}">
24 </div> 20 </div>
25 - <!-- Modal Body -->  
26 - <div class="modal-body">  
27 -  
28 - {% block content_exam %}  
29 -  
30 - <div class="panel-body">  
31 - <div class="row form-group">  
32 - <label for="exam_name" class="col-md-2 control-label">{% trans "Exam Name" %}</label>  
33 - <div class="col-md-10">  
34 - <input type="text" name="exam_name" class="form-control" id="exam_name" placeholder="{% trans 'Exam Name' %}">  
35 - </div>  
36 - </div>  
37 - <div class="row form-group">  
38 - <label for="begin_date" class="col-md-2 control-label">{% trans "Exam's begin date" %}</label>  
39 - <div class="col-md-10">  
40 - <input type="date" name="begin_date" class="form-control" id="begin_date" placeholder='{% trans "Begin Date" %}'>  
41 - </div>  
42 - </div>  
43 - <div class="row form-group">  
44 - <label for="end_date" class="col-md-2 control-label">{% trans "Exam's end date" %}</label>  
45 - <div class="col-md-10">  
46 - <input type="date" name="end_date" class="form-control" id="end_date" placeholder='{% trans "End Date" %}'>  
47 - </div>  
48 - </div>  
49 - <div class="row form-group">  
50 - <div class="col-md-10">  
51 - <div class="checkbox">  
52 - <label>  
53 - <input type="checkbox" name="checkbox"><span class="checkbox-material"></span> {% trans "Allow submissions after deadline?" %}  
54 - </label>  
55 - </div>  
56 - </div>  
57 - </div>  
58 - <div class="row form-group" id="buttonAddQuestion">  
59 - <div class="col-md-10">  
60 - <button id="addQuestion" type="button" class="btn btn-raised btn-default">Add new question buton</button>  
61 - </div>  
62 - </div>  
63 - <!-- Modal Footer -->  
64 - <div class="modal-footer">  
65 - <!-- Don't remove that!!! -->  
66 - <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>  
67 - {% block button_save %}  
68 - <!-- Put curtom buttons here!!! -->  
69 - <button type="submite" id="button" form="form" class="btn btn-primary btn-raised">{% trans "Create" %}</button>  
70 - {% endblock button_save %}  
71 - </div>  
72 -  
73 -  
74 - {% endblock content_exam %} 21 + </div>
  22 + <div class="row form-group">
  23 + <label for="begin_date" class="col-md-2 control-label">{% trans "Exam's begin date" %}</label>
  24 + <div class="col-md-4">
  25 + <input type="date" name="begin_date" class="form-control" id="begin_date" placeholder='{% trans "Begin Date" %}'>
  26 + </div>
  27 + <label for="end_date" class="col-md-2 control-label">{% trans "Exam's end date" %}</label>
  28 + <div class="col-md-4">
  29 + <input type="date" name="end_date" class="form-control" id="end_date" placeholder='{% trans "End Date" %}'>
  30 + </div>
  31 + </div>
  32 + <div class="row form-group">
  33 + <div class="col-md-10">
  34 + <div class="checkbox">
  35 + <label>
  36 + <input type="checkbox" name="checkbox"><span class="checkbox-material"></span> {% trans "Allow submissions after deadline?" %}
  37 + </label>
  38 + </div>
  39 + </div>
  40 + </div>
  41 + <div class="row form-group" id="buttonAddQuestion">
  42 + <div class="col-md-10">
  43 + <button id="addQuestion" type="button" class="btn btn-raised btn-default">Add new question buton</button>
75 </div> 44 </div>
76 </div> 45 </div>
77 </div> 46 </div>
  47 + <div class="panel-footer">
  48 + <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>
  49 + {% block button_save %}
  50 + <!-- Put curtom buttons here!!! -->
  51 + <button type="submite" id="button" form="form" class="btn btn-primary btn-raised">{% trans "Create" %}</button>
  52 + {% endblock button_save %}
  53 + </div>
78 </div> 54 </div>
79 55
  56 +{% block javascript %}
  57 + <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  58 + <script src="{% static 'js/Exam.js' %}"></script>
  59 + <!-- Init material Bootstrap -->
  60 + <script type="text/javascript">$.material.init()</script><!-- O botao radio volta a funcionar quando coloco essa função-->
  61 +{% endblock %}
80 {% endblock content %} 62 {% endblock content %}