source: trunk/skins/lemill/widget_exercise.pt @ 3073

Revision 3073, 21.2 KB checked in by jukka, 9 years ago (diff)

Still working with exercises

Line 
1<html xmlns="http://www.w3.org/1999/xhtml"
2      xmlns:tal="http://xml.zope.org/namespaces/tal"
3      xmlns:metal="http://xml.zope.org/namespaces/metal"
4      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
5      i18n:domain="lemill">
6
7  <head><title></title></head>
8
9  <body>
10
11<!-- Main view macro -->
12
13<metal:view_macro define-macro="view" tal:define="value accessor"> 
14  <form method="post" tal:attributes="action string:$here_url/feedback_view">
15    <tal:chapters repeat="chapter value">           
16      <tal:defs tal:define="text chapter/text;
17        type chapter/type;
18        index repeat/chapter/index;
19        macro_mapping python:{'text_block':'here/widget_chapter/macros/view_text_block',
20         'guidelines':'here/widget_exercise/macros/view_guidelines',
21         'media_piece':'here/widget_chapter/macros/view_media_piece',
22         'embed_block':'here/widget_chapter/macros/view_embed_block',
23         'multiple_choices':'here/widget_exercise/macros/view_multiple_choices',
24         'fill_in_the_blanks':'here/widget_exercise/macros/view_fill_in_the_blanks',
25         'open_ended':'here/widget_exercise/macros/view_open_ended',
26         'exercise':'here/widget_exercise/macros/view_exercise'};">
27
28        <metal:view_block use-macro="python:path(macro_mapping[type])" />
29        <div class="visualClear" style="height:20px">&nbsp;</div>
30       </tal:defs>
31    </tal:chapters>
32    <fieldset class="visualNoPrint">
33        <p i18n:translate="text_do_send_answers_to_e_mail">If you want the system to check your answers and send feedback as e-mail to you or your teacher, you need to fill <span i18n:name="show_form"><a href="javascript:$('#sending_email').toggle('slow');void(0);" i18n:translate="text_snippet_show_form">the e-mail form</a></span>.</p>
34        <div id="sending_email" style="display:none">
35        <div class="visualClear" style="height:10px">&nbsp;</div>
36            <label for="your_name"><tal:block i18n:translate="label_your_name">Your name</tal:block></label>
37            <div class="formHelp" i18n:translate="desc_exercise_your_name">If you're sending exercise to teacher, enter your name so that the teacher knows who completed the exercise.</div>       
38            <p><input type="text" value="" id="your_name" name="your_name" tal:attributes="tabindex tabindex/next"/></p>
39
40        <div class="visualClear" style="height:10px">&nbsp;</div>
41            <label for="students_email"><tal:block i18n:translate="label_your_email">Your e-mail</tal:block>
42                <span class="fieldRequired" title="Required" i18n:attributes="title title_required;" i18n:translate="label_required">(Required)</span>
43            </label>
44            <div class="formHelp" i18n:translate="desc_exercise_your_email">Enter your e-mail to get automatic feedback to your answers.</div>       
45            <p><input type="text" value="" id="students_email" name="students_email" tal:attributes="tabindex tabindex/next"/></p>
46        <div class="visualClear" style="height:10px">&nbsp;</div>
47            <label for="teachers_email"><tal:block i18n:translate="label_teachers_email">Teacher's e-mail</tal:block></label>
48            <div class="formHelp" i18n:translate="desc_exercise_teachers_email">Enter your teacher's e-mail to send your answers for assessment.</div>       
49            <p><input type="text" value="" id="teachers_email" name="teachers_email" tal:attributes="tabindex tabindex/next"/></p>
50        <div class="visualClear" style="height:10px">&nbsp;</div>
51        <label for="captcha"><tal:block i18n:translate="label_humanity_test">Humanity test</tal:block></label>
52        <div class="formHelp" i18n:domain="lemill" i18n:translate="help_humanity_captcha_test">Please type the word you see in the image into this field. This is important to make sure that you are a human and not a robot that will spam LeMill.</div>
53        <tal:block tal:content="structure context/lemill_tool/generateCaptcha" />
54        <div class="visualClear" style="height:10px">&nbsp;</div>
55            <p><input class="context" tabindex="" type="submit" name="submit" value="Submit" i18n:attributes="value button_send_submit;" tal:attributes="tabindex tabindex/next"/></p>
56        </div>
57
58   
59    </fieldset>
60   </form>
61</metal:view_macro>
62
63<!-- view macros -->
64
65<metal:view_guidelines define-macro="view_guidelines">
66<div tal:replace="structure text" />
67</metal:view_guidelines>
68   
69<metal:view_multiple_choices define-macro="view_multiple_choices">
70<table>
71    <tr>
72        <td valign="middle" align="left">
73            <p tal:content="structure text">PLACEHOLDER</p>
74        </td>
75    </tr>
76    <tr>
77        <td>
78            <span tal:repeat="choice chapter/choices" tal:omit-tag="">
79            <p tal:define="aindex repeat/choice/index">
80                <input type="checkbox" value="1"
81                    tal:attributes="id python:'exercise_%s_checkbox_%s' % (index,aindex);
82                    name python:'exercise_%s_checkbox_%s' % (index,aindex);" />
83                <span tal:replace="structure python:choice[0]"></span>
84            </p>
85            </span>
86        </td>                   
87    </tr>
88</table>
89</metal:view_multiple_choices>
90
91
92<metal:view_fill_in_the_blanks define-macro="view_fill_in_the_blanks">
93<p tal:content="structure python:context.replaceBlanksWithInputTag(text, index, readonly=False, give_answers=False)">PLACEHOLDER</p>
94</metal:view_fill_in_the_blanks>
95
96<metal:view_open_ended define-macro="view_open_ended">
97<p tal:content="structure text">PLACEHOLDER</p>
98<textarea cols="40" rows="8" value=""
99   tal:attributes="id python:'exercise_%s_answer' % index;
100                    name python:'exercise_%s_answer' % index;
101                    tabindex tabindex/next;"></textarea>   
102</metal:view_open_ended>
103
104
105<!-- Main edit macro -->
106
107<metal:edit define-macro="edit">
108  <metal:use use-macro="field_macro | here/field/macros/edit">
109   <metal:fill fill-slot="widget_body">
110      <metal:chapter_editor_block use-macro="here/widget_chapter/macros/chapter_editor" />
111       <tal:buttons>   
112        <input class="context"
113            tabindex=""
114            type="submit"
115            name="add_question"
116            value="Add question"
117            i18n:attributes="value label_add_question;"
118            tal:attributes="tabindex tabindex/next"
119            />
120        <div class="visualClear" style="height:10px">&nbsp;</div>
121        <input class="context"
122            tabindex=""
123            type="submit"
124            name="add_mediapiece"
125            value="Add media piece"
126            i18n:attributes="value label_add_media_piece;"
127            tal:attributes="tabindex tabindex/next"
128            />               
129        <input class="context"
130            tabindex=""
131            type="submit"
132            name="add_textarea"
133            value="Add text block"
134            i18n:attributes="value label_add_textarea;"
135            tal:attributes="tabindex tabindex/next"
136            />
137        <input class="context"
138            tabindex=""
139            type="submit"
140            name="add_embedblock"
141            value="Add an embedded section"
142            i18n:attributes="value label_add_embed_block;"
143            tal:attributes="tabindex tabindex/next"
144            />
145       </tal:buttons>
146   </metal:fill>
147 </metal:use>
148</metal:edit>
149
150
151<!-- edit/view macros,  called from Main edit macros if chapter is not the one that is edited -->
152
153
154<metal:edit_view_guidelines define-macro="edit_view_guidelines">
155    <div tal:replace="structure cleaned_chapter" />
156</metal:edit_view_guidelines>
157
158<metal:edit_view_guidelines define-macro="edit_view_exercise">
159    <div tal:replace="structure cleaned_chapter" />
160</metal:edit_view_guidelines>
161
162
163<metal:edit_view_poll define-macro="edit_view_poll">
164<label><tal:block i18n:translate="label_exercise_poll_question">Poll question</tal:block>:</label><br /><br />
165<metal:use use-macro="radio_choice" />
166</metal:edit_view_poll>
167
168<metal:edit_view_choice define-macro="edit_view_choice">
169<label><tal:block i18n:translate="label_exercise_choice_question">Choice question</tal:block>:</label><br /><br />
170<metal:radio_choice define-macro="radio_choice"><table>
171  <tr>
172    <td valign="middle" align="left">
173      <p tal:content="structure cleaned_chapter/text">PLACEHOLDER</p>
174    </td>
175  </tr>
176  <tr>
177   <td>
178     <span tal:repeat="choice cleaned_chapter/choices" tal:omit-tag="">
179     <p tal:define="aindex repeat/choice/index">
180       <input type="radio" tal:attributes="value aindex; id python:'choices_%s' % index; name python:'choices_%s' % index" />
181       <span tal:content="structure python:choice[0]"></span>
182     </p>
183     </span>
184    </td>
185  </tr>
186</table></metal:radio_choice>
187</metal:edit_view_choice>
188
189
190
191<metal:edit_view_multiple_choices define-macro="edit_view_multiple_choices">
192<label><tal:block i18n:translate="label_exercise_multiple_choice_question">Multiple choice question</tal:block>:</label><br /><br />
193<table>
194  <tr>
195    <td valign="middle" align="left">
196      <p tal:content="structure cleaned_chapter/text">PLACEHOLDER</p>
197    </td>
198  </tr>
199  <tr>
200   <td>
201     <span tal:repeat="choice cleaned_chapter/choices" tal:omit-tag="">
202     <p tal:define="aindex repeat/choice/index">
203       <input type="checkbox" value="" tal:attributes="id python:'choices_%s_answer_%s' % (index,aindex);
204          name python:'choices_%s_answer_%s' % (index,aindex)" />
205       <span tal:content="structure python:choice[0]"></span>
206     </p>
207     </span>
208    </td>
209  </tr>
210</table>
211</metal:edit_view_multiple_choices>
212
213<metal:edit_view_fill_in_the_blanks define-macro="edit_view_fill_in_the_blanks">
214<label><tal:block i18n:translate="label_exercise_fill_in_the_blanks">Fill-in-the-blanks exercise</tal:block>:</label>
215<p tal:content="structure python:context.replace_blanks_with_input_tag(cleaned_chapter['text'],index,readonly=True)">PLACEHOLDER</p>
216</metal:edit_view_fill_in_the_blanks>
217
218<metal:edit_view_open_ended define-macro="edit_view_open_ended">
219<label><tal:block i18n:translate="label_exercise_open_ended">Open-ended question</tal:block>:</label>
220  <p tal:content="structure cleaned_chapter/text">PLACEHOLDER</p>
221  <textarea cols="40" rows="8" value="" disabled="1"></textarea>
222</metal:edit_view_open_ended>
223
224<!--- edit macros, called from Main edit macro for chapter that is open to editing -->
225
226<metal:original_text define-macro="original_text">
227<label i18n:translate="label_original_field">Original<span i18n:name="field" >:</span></label>
228<div class="text_to_translate">
229   <span tal:replace="structure chapter/translation_source"/>           
230</div>
231</metal:original_text>
232
233<metal:edit_guidelines define-macro="edit_guidelines">
234 <label><tal:block i18n:translate="label_exercise_guidelines">Guidelines</tal:block></label>
235 <div class="formHelp" i18n:translate="desc_exercise_guidelines">Enter here guidelines for completing the exercise.</div>
236 <div class="translatedText" tal:condition="translation"><metal:tra use-macro="here/widget_chapter/macros/original_text" /></div>
237 <textarea cols="40" rows="4"
238  tal:attributes="id string:chapter_$index;
239      name string:chapter_$index;
240      tabindex tabindex/next;" tal:content="text"></textarea>
241</metal:edit_guidelines>
242
243
244<metal:edit_poll define-macro="edit_poll">
245<metal:use use-macro="here/widget_exercise/macros/edit_exercise" />
246</metal:edit_poll>
247
248<metal:edit_choice define-macro="edit_choice">
249<metal:use use-macro="here/widget_exercise/macros/edit_exercise" />
250</metal:edit_choice>
251
252<metal:edit_multiple_choices define-macro="edit_multiple_choices">
253<metal:use use-macro="here/widget_exercise/macros/edit_exercise" />
254</metal:edit_multiple_choices>
255
256
257<metal:edit_question define-macro="edit_exercise">
258 <div class="chapter_edit" style="height:360px">
259  <metal:question_selection use-macro="here/widget_exercise/macros/question_selection" />
260  <metal:multiple_questions use-macro="here/widget_exercise/macros/multiple_questions_edit" />
261  <metal:edit_fill_in_the_blanks use-macro="here/widget_exercise/macros/edit_fill_in_the_blanks" />
262  <metal:edit_open_ended use-macro="here/widget_exercise/macros/edit_open_ended" />
263  <metal:upload_hot_potatoes use-macro="here/widget_exercise/macros/upload_hot_potatoes" />
264  <div class="inner_edit" id="preview">
265    <label align="center"><tal:block i18n:translate="preview">Preview</tal:block>:</label>
266    <div class="innermost" style="width:700px;height:290px;">replaced text</div>
267    <a href="javascript:previewQuestion();void(0)" class="backlink" style="align:left" >&lt; <tal:block i18n:translate="link_edit_exercise">Edit exercise</tal:block></a>
268  </div>
269 </div>
270</metal:edit_question>
271
272
273<metal:question_selection define-macro="question_selection">
274  <div class="inner_edit" id="question_selection" tal:attributes="style python:test(chapter['type']=='exercise','display:block','')">
275   <table width="90%" height="290">
276     <tr><th><label i18n:translate="label_select_exercise_type">Select the exercise type:</label></th></tr>
277     <tr height="200"><td>
278        <ul style="line-height:24px;">
279           <li><label><a href="javascript:editQuestion('multiple_choices');void(0);"><tal:block i18n:translate="label_exercise_multiple_choice_question">Multiple choice question</tal:block>...</a></label></li>
280           <li><label><a href="javascript:editQuestion('fill_in_the_blanks');void(0);"><tal:block i18n:translate="label_exercise_fill_in_the_blanks">Fill-in-the-blanks exercise</tal:block>...</a></label></li>
281           <li><label><a href="javascript:editQuestion('open_ended');void(0);"><tal:block i18n:translate="label_exercise_open_ended">Open-ended question</tal:block>...</a></label></li>
282           <li><label><a href="javascript:editQuestion('hot_potatoes');void(0);"><tal:block i18n:translate="upload_questions_from_hot_potatoes">Upload questions from Hot Potatoes</tal:block>...</a></label></li>
283        </ul>
284      </td></tr>
285   </table>
286  </div>
287</metal:question_selection>
288
289
290<metal:upload_hot_potatoes define-macro="upload_hot_potatoes">
291 <div class="inner_edit" id="hot_potatoes_edit" >
292  <table width="100%"><tr>
293   <th><label i18n:translate="upload_questions_from_hot_potatoes">Upload questions from Hot Potatoes</label></th></tr>
294   <tr height="200">
295     <td>       
296        <div class="formHelp" i18n:translate="hot_potatoes_upload_helptext">You can upload Multiple Choice and Multiple Correct questions made with JQuiz and exercises made with JCloze. Some of the features available in Hot Potatoes are not supported in LeMill.</div>
297        <label i18n:translate="label_choose_file" for="file">Choose a file</label>
298        <div class="formHelp" i18n:translate="text_allowed_file_types">
299            Allowed file types:
300            <span i18n:name="list">.jqz, .jcl</span>
301        </div>
302        <input type="file" name="hotpotatoes_file" size="40" />
303        <div>
304            <input
305                id="hotpotatoes-uploadbutton"
306                type="submit"
307                name="form.button.add_hotpotatoes_questions"
308                value="Add questions"
309                i18n:attributes="value label_add_questions;"
310                />
311        </div>
312    </td></tr>
313   <tr><td> 
314      <a href="javascript:questionSelection();void(0)" style="align:left">&lt; <tal:block i18n:translate="exercise_types">Exercise types</tal:block></a></td>
315    </tr>
316   </table>
317  </div>
318</metal:upload_hot_potatoes>
319
320
321<metal:edit_fill_in_the_blanks define-macro="edit_fill_in_the_blanks">
322 <div class="inner_edit" id="fill_in_the_blanks_edit" tal:attributes="style python:test(chapter['type']=='fill_in_the_blanks','display:block','')">
323   <table width="100%">
324     <tr><th colspan="2"><label i18n:translate="label_exercise_fill_in_the_blanks">Fill-in-the-blanks exercise</label></th></tr>
325     <tr>
326      <td colspan="2">
327        <div class="formHelp" i18n:translate="desc_exercise_fill_in_the_blanks">Write the correct answers inside braces like this: {answer}. The word will be replaced with an empty box. If there are more than one correct answer you can write multiple braces like this: The Eiffel tower is the most famous building of {Paris}{France}.</div>
328        <div class="translatedText" tal:condition="translation"><metal:tra use-macro="here/widget_chapter/macros/original_text" /></div>
329        <textarea style="width:98%" cols="40" rows="13" id="fill_blanks" name="fill_blanks"
330            tal:attributes="tabindex tabindex/next;" tal:content="text"></textarea>
331      </td></tr>
332     <tr><td align="left"> 
333      <a href="javascript:questionSelection();void(0);" style="align:left" >&lt;
334      <tal:block i18n:translate="exercise_types">Exercise types</tal:block></a></td>
335      <td align="right"><a href="javascript:previewFillTheBlanks();previewQuestion();void(0);" style="align:right"><tal:block i18n:translate="preview">Preview</tal:block> &gt;</a>
336     </td></tr>
337  </table>
338 </div>
339</metal:edit_fill_in_the_blanks>
340
341
342
343<metal:edit_open_ended define-macro="edit_open_ended">
344 <div class="inner_edit" id="open_ended_edit" tal:attributes="style python:test(chapter['type']=='open_ended','display:block','')">
345 <table width="100%"><tr>
346 <th colspan="2"><label>Open-ended question:</label></th></tr>
347 <tr height="200"><td colspan="2">
348     <div class="formHelp" i18n:translate="desc_exercise_open_ended">Enter here a question that requires free-form answer.</div>
349     <div class="translatedText" tal:condition="translation"><metal:tra use-macro="here/widget_chapter/macros/original_text" /></div>
350     <textarea style="width:98%" cols="40" rows="4" id="open_field" name="open_field"
351      tal:attributes="tabindex tabindex/next;" tal:content="text"></textarea>
352 </td></tr>
353  <tr><td align="left"> 
354      <a href="javascript:questionSelection();void(0);" style="align:left">&lt; <tal:block i18n:translate="exercise_types">Exercise types</tal:block></a></td>
355      <td align="right"><a href="javascript:previewOpenEnded();previewQuestion();void(0);" style="align:right"><tal:block i18n:translate="preview">Preview</tal:block> &gt; </a>
356   </td></tr>
357  </table>
358 </div>
359</metal:edit_open_ended>
360
361
362
363<metal:multiple_questions define-macro="multiple_questions_edit">
364<div class="inner_edit" id="multiple_choices_edit" tal:attributes="style python:test(chapter['type'] in ['multiple_choices','choices'],'display:block','')">
365 <table width="100%">
366    <tr><th colspan="2"><label i18n:translate="label_exercise_multiple_choice_question">Create a multiple choice question</label></th></tr>
367    <tr><td>
368    <label i18n:translate="label_exercise_choices_question">The question:</label>
369         <div class="formHelp" i18n:translate="desc_multiple_choices_question">Please write the question here.</div>
370    </td>
371    <td>
372     <div class="translatedText" tal:condition="translation"><metal:tra use-macro="here/widget_chapter/macros/original_text" /></div>
373         <textarea rows="3" style="width:96%" id="choice_question" name="choice_question" tal:attributes="tabindex tabindex/next;" tal:content="chapter/text"></textarea>
374     </td></tr>
375    <tr><td width="40%">
376     <label i18n:translate="editing_question_answers">Answers:</label>
377     <div class="formHelp" i18n:translate="desc_exercise_answers">Write one answer per row and check it to be either the right answer or a wrong one. Leave the space empty to remove it.</div>
378     </td>
379     <td width="60%">
380     <table width="100%" class="choices_list sortable" style="table-layout: fixed" tal:define="choices python:chapter.get('choices',[('',1),('',0),('',0)])" >
381      <tr>
382       <td width="22"><img src="images/tick.gif" width="20" height="20" alt="Correct" /></td>
383       <td width="22"><img src="images/cross.gif" id="cross" width="20" height="20" alt="Incorrect" /></td>
384       <td><div class="formHelp" i18n:translate="desc_answer">Answer</div></td>
385       <td width="10"><input type="hidden" id="choice_answer_count" name="choice_answer_count" value="3" tal:attributes="value python:len(choices)" /></td>
386    </tr>
387     <tal:loop repeat="choicetuple choices">
388      <tr class="sortable_row" tal:define="index repeat/choicetuple/index">
389       <td><input type="radio" value="1" name="answer_0_correct" id="answer_0_correct" tal:attributes="name string:answer_${index}_correct; id string:answer_${index}_correct; checked python:choicetuple[1];"/></td>
390       <td><input type="radio" value="0" name="answer_0_correct" id="answer_0_correct" tal:attributes="name string:answer_${index}_correct; id string:answer_${index}_correct; checked python:not choicetuple[1];"/></td>
391       <td>
392<textarea rows="2" style="height:3em;float:left;" cols="40" class="multiple_choice_answer" name="choice_answer_0" id="choice_answer_0" tal:attributes="name string:choice_answer_${index}; id string:choice_answer_${index}" tal:content="python:choicetuple[0]"></textarea></td>
393       <td valign="top"><span class="handle handle_small">&nbsp;</span>
394       <input type="hidden" class="orderkeeper" value="0" name="choice_order_0" id="choice_order_0" tal:attributes="name string:choice_order_${index}; id string:choice_order_${index}"/></td>
395      </tr>
396     </tal:loop>
397      <tr>
398       <td></td><td></td><td align="right"><input type="button" i18n:attributes="value button_add_choices" value="Add choices" align="right" onclick="addAnswer(this);" /></td><td></td>
399      </tr>
400
401    </table>
402    </td>
403    </tr>
404     <tr><td align="left"> 
405        <a href="javascript:void(0)" style="align:left" onclick="questionSelection();">&lt; <tal:block i18n:translate="exercise_types">Exercise types</tal:block></a></td>
406        <td align="right"><a href="javascript:previewMultipleChoice();previewQuestion();void(0)" style="align:right"><tal:block i18n:translate="preview">Preview</tal:block> &gt;</a>
407     </td></tr>
408  </table>
409
410</div>
411</metal:multiple_questions>
412
413  </body>
414
415</html>
Note: See TracBrowser for help on using the repository browser.