1.1 --- a/examples/Common/Questionnaire/Resources/question_template.xhtml Sat Oct 25 22:37:00 2008 +0200
1.2 +++ b/examples/Common/Questionnaire/Resources/question_template.xhtml Sun Nov 16 01:19:33 2008 +0100
1.3 @@ -5,7 +5,6 @@
1.4 xmlns:template="http://www.boddie.org.uk/ns/xmltools/template">
1.5 <head>
1.6 <title>Questionnaire Editor</title>
1.7 - <meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.8 <link xmlns:xlink="http://www.w3.org/1999/xlink" href="styles/styles.css"
1.9 rel="stylesheet" type="text/css" />
1.10 </head>
1.11 @@ -17,59 +16,109 @@
1.12
1.13 <form method="POST" action="">
1.14
1.15 +<div class="questionnaire">
1.16 +
1.17 <table class="questionnaire">
1.18 <tbody template:element="question">
1.19 <tr>
1.20 <th class="question">Question</th>
1.21 - <td class="question"><textarea cols="40" rows="4" template:attribute-area="question-text,insert"
1.22 - name="...">Question</textarea></td>
1.23 + <td class="question">
1.24 + <textarea cols="40" rows="4" template:attribute-area="question-text,insert"
1.25 + name="...">Question</textarea>
1.26 + </td>
1.27 <td class="question-options">
1.28 - <input type="submit" value="Remove question" name="..." template:selector-field="remove-question"
1.29 - /></td>
1.30 + <input type="submit" value="Remove question" name="..." template:selector-field="remove-question" />
1.31 + </td>
1.32 </tr>
1.33 <tr>
1.34 <th class="response">Response</th>
1.35 - <td class="response"><input type="radio" template:attribute-button="question-type,text,checked"
1.36 - name="..." value="..." /> Text</td>
1.37 + <td class="response">
1.38 + <input type="radio" template:attribute-button="text-response,none,checked"
1.39 + name="..." value="..." /> No text answer<br />
1.40 + <input type="radio" template:attribute-button="text-response,before,checked"
1.41 + name="..." value="..." /> Text before<br />
1.42 + </td>
1.43 <td></td>
1.44 </tr>
1.45 <tr>
1.46 <td class="response"></td>
1.47 - <td class="response"><input type="text" size="40" template:attribute-field="response-text"
1.48 - name="..." value="..." /></td>
1.49 - <td></td>
1.50 - </tr>
1.51 - <tr>
1.52 - <td class="response"></td>
1.53 - <td class="response"><input type="radio" template:attribute-button="question-type,choice,checked"
1.54 - name="..." value="choice" /> Multiple choice</td>
1.55 - <td></td>
1.56 + <td class="response">
1.57 + <input type="checkbox" template:attribute-button="choice-response,multiple,checked"
1.58 + name="..." value="choice" /> Allow multiple choices...
1.59 + </td>
1.60 + <td class="response">
1.61 + <input type="submit" value="Add choice" name="..." template:selector-field="add-choice,choice" />
1.62 + </td>
1.63 </tr>
1.64 <tr template:element="choice">
1.65 <td class="response"></td>
1.66 - <td class="choice"><input type="text" size="40" template:attribute-field="response-choice"
1.67 - name="..." value="..." /></td>
1.68 + <td class="choice">
1.69 + <input type="text" size="40" template:attribute-field="response-choice"
1.70 + name="..." value="..." />
1.71 + </td>
1.72 <td class="choice-options">
1.73 - <input type="submit" value="Remove choice" name="..." template:selector-field="remove-choice"
1.74 - /></td>
1.75 + <input type="submit" value="Remove choice" name="..." template:selector-field="remove-choice" />
1.76 + </td>
1.77 </tr>
1.78 <tr>
1.79 <td class="response"></td>
1.80 - <td class="response"></td>
1.81 <td class="response">
1.82 - <input type="submit" value="Add choice" name="..." template:selector-field="add-choice,choice"
1.83 - /></td>
1.84 + <input type="radio" template:attribute-button="text-response,after,checked"
1.85 + name="..." value="..." /> Text after
1.86 + </td>
1.87 + <td></td>
1.88 </tr>
1.89 </tbody>
1.90 </table>
1.91
1.92 <p>
1.93 - <input type="submit" value="Add question" name="add-question" /> to make
1.94 - the questionnaire longer.</p>
1.95 + <input type="submit" value="Add question" name="add-question" /> to make
1.96 + the questionnaire longer.
1.97 + </p>
1.98
1.99 <p>
1.100 - <input type="submit" value="Finish" name="finish" /> when all the questions
1.101 - and responses are ready.</p>
1.102 + <input type="submit" value="Finish" name="finish" /> when all the questions
1.103 + and responses are ready.
1.104 + </p>
1.105 +
1.106 +</div>
1.107 +
1.108 +<!-- Repeat the questionnaire in preview mode. -->
1.109 +
1.110 +<div class="preview">
1.111 +
1.112 + <table class="preview">
1.113 + <tbody template:element="question">
1.114 + <tr>
1.115 + <th class="question">Question</th>
1.116 + <td class="question">
1.117 + <span template:value="@question-text">Question</span>
1.118 + </td>
1.119 + </tr>
1.120 + <tr>
1.121 + <th class="response">Response</th>
1.122 + <td class="response">
1.123 + <p template:if="@text-response = 'before'" class="text-before">
1.124 + <input type="text" size="40" template:attribute-field="response-text"
1.125 + name="..." value="..." />
1.126 + </p>
1.127 + <p template:element="choice" class="choice" xml:space="preserve">
1.128 + <input type="{template:choice(../@choice-response = 'multiple', 'checkbox', 'radio')}"
1.129 + template:attribute-button="selected,true,checked" name="..." value="..." />
1.130 + <span template:value="@response-choice">Choice</span>
1.131 + </p>
1.132 + <p template:if="@text-response = 'after'" class="text-after">
1.133 + <input type="text" size="40" template:attribute-field="response-text"
1.134 + name="..." value="..." />
1.135 + </p>
1.136 + </td>
1.137 + </tr>
1.138 + </tbody>
1.139 + </table>
1.140 +
1.141 +</div>
1.142 +
1.143 </form>
1.144 +
1.145 </body>
1.146 </html>
2.1 --- a/examples/Common/Questionnaire/Resources/styles/styles.css Sat Oct 25 22:37:00 2008 +0200
2.2 +++ b/examples/Common/Questionnaire/Resources/styles/styles.css Sun Nov 16 01:19:33 2008 +0100
2.3 @@ -1,8 +1,46 @@
2.4 +div.questionnaire {
2.5 + width: 40%;
2.6 + float: left;
2.7 +}
2.8 +
2.9 +div.preview {
2.10 + width: 50%;
2.11 + float: right;
2.12 + background-color: #555555;
2.13 +}
2.14 +
2.15 +div.preview table.preview {
2.16 + background-color: #ffffff;
2.17 + border: 1px solid #000000;
2.18 + padding: 5px;
2.19 + position: relative;
2.20 + top: -10px;
2.21 + left: -10px;
2.22 +}
2.23 +
2.24 +table.preview {
2.25 + border-spacing: 0px;
2.26 +}
2.27 +
2.28 table.questionnaire td, table.questionnaire th {
2.29 padding: 5px;
2.30 margin: 0px;
2.31 }
2.32
2.33 +table.preview td, table.preview th {
2.34 + padding: 10px;
2.35 + margin: 0px;
2.36 +}
2.37 +
2.38 +table.preview td p.text-before {
2.39 + margin-top: 0px;
2.40 +}
2.41 +
2.42 +table.preview td p.choice {
2.43 + padding: 2px;
2.44 + margin: 0px 0px 0px 0px;
2.45 +}
2.46 +
2.47 .question, .question-options {
2.48 background-color: #ffffff;
2.49 color: #000000;