Browse Source

he fet les intruccions de com aprofitar el projecte i la plantilla d'exercici en blanc (nombres anglès-català)

master
Xavier 6 years ago
parent
commit
cf90aadcb1
6 changed files with 274 additions and 8 deletions
  1. 2
    2
      README.textile
  2. 12
    1
      docs/Instruccions.textile
  3. 0
    0
      docs/template
  4. BIN
      exers/template/image.png
  5. 259
    0
      exers/template/template.html
  6. 1
    5
      qfer.textile

+ 2
- 2
README.textile View File

@@ -34,8 +34,8 @@ There are two sets of exercises, that I maintain in two separate git branches:
34 34
 h3. Directories
35 35
 
36 36
 * In "./stylesheets":https://github.com/somenxavier/my-drag-and-drop-kahn-academy/tree/master/stylesheets there are CSS files for general presentation of pages. It's mainly used in gh-pages branch.
37
-* In "./docs":https://github.com/somenxavier/my-drag-and-drop-kahn-academy/tree/master/docs there are docs about project: Greetings, History, Instructions for adapt and modify the exercises for fit to your needs, etc. There is also one template (blank exercise).
38
-* In "./exers":https://github.com/somenxavier/my-drag-and-drop-kahn-academy/tree/master/exers there are the exercises. Each exercise has specific CSS and javascript within.
37
+* In "./docs":https://github.com/somenxavier/my-drag-and-drop-kahn-academy/tree/master/docs there are docs about project: Greetings, History, Instructions for adapt and modify the exercises (for fit to your needs), etc.
38
+* In "./exers":https://github.com/somenxavier/my-drag-and-drop-kahn-academy/tree/master/exers there are the exercises. Each exercise has specific CSS and javascript within. There is also one example exercise (template exercise).
39 39
 
40 40
 h3. Pattern of files
41 41
 

+ 12
- 1
docs/Instruccions.textile View File

@@ -1 +1,12 @@
1
-h1. Instruccions per a adaptar aquest projecte
1
+h1. Instructions for adapt this project
2
+
3
+The better is that you modify the template document. In this case:
4
+
5
+# Change <pre><title></pre> in document for setting the title
6
+# Be sure link to stylesheet is reachable
7
+# Change level and area tags in document, and unit title and your project title
8
+# Put your image in <pre><img class="displayed" src="image.png" ...></pre>
9
+# Change the text of the draggable text (<pre>div id="#drag{i}"</pre>)
10
+# Then, change the position of the pou in the CSS, according with your image. This are absolute position relative to imagecontainer div.
11
+# Put the correct answers, modifying <pre>resposta</pre> in javascript. 
12
+# Finally change the footer link: source code, sources of information, license and about.

+ 0
- 0
docs/template View File


BIN
exers/template/image.png View File


+ 259
- 0
exers/template/template.html View File

@@ -0,0 +1,259 @@
1
+<html>
2
+  <head>
3
+    <title>Unit title -> exercise title</title>
4
+    <!-- load external CSS stylesheets -->
5
+    <link rel="stylesheet" type="text/css" href="../../stylesheets/style.css" media="all" />
6
+    <!-- load internal CSS stylesheets -->
7
+    <style type="text/css">
8
+      /* instructions CSS */
9
+      #instruccions {
10
+        border: 1px solid #aaaaaa;
11
+        text-align:center;
12
+        vertical-align: middle;
13
+        background-color: rgb(230, 241, 246);
14
+        background-image: none;
15
+        background-repeat: repeat;
16
+        background-attachment: scroll;
17
+        background-position: 0% 0%;
18
+        background-clip: border-box;
19
+        background-origin: padding-box;
20
+        background-size: auto auto;
21
+        border-top-left-radius: 0.5em;
22
+        border-top-right-radius: 0.5em;
23
+        border-bottom-right-radius: 0.5em;
24
+        border-bottom-left-radius: 0.5em;
25
+      }
26
+      /* pou CSS: are the div's placed on image in which we place the text */
27
+      .pou {
28
+        border: medium dotted rgb(102, 0, 51);
29
+        border-top-width: medium;
30
+        border-right-width-value: medium;
31
+        border-right-width-ltr-source: physical;
32
+        border-right-width-rtl-source: physical;
33
+        border-bottom-width: medium;
34
+        border-left-width-value: medium;
35
+        border-left-width-ltr-source: physical;
36
+        border-left-width-rtl-source: physical;
37
+        border-top-style: dotted;
38
+        border-right-style-value: dotted;
39
+        border-right-style-ltr-source: physical;
40
+        border-right-style-rtl-source: physical;
41
+        border-bottom-style: dotted;
42
+        border-left-style-value: dotted;
43
+        border-left-style-ltr-source: physical;
44
+        border-left-style-rtl-source: physical;
45
+        border-top-color: rgb(102, 0, 51);
46
+        border-right-color-value: rgb(102, 0, 51);
47
+        border-right-color-ltr-source: physical;
48
+        border-right-color-rtl-source: physical;
49
+        border-bottom-color: rgb(102, 0, 51);
50
+        border-left-color-value: rgb(102, 0, 51);
51
+        border-left-color-ltr-source: physical;
52
+        border-left-color-rtl-source: physical;
53
+        -moz-border-top-colors: none;
54
+        -moz-border-right-colors: none;
55
+        -moz-border-bottom-colors: none;
56
+        -moz-border-left-colors: none;
57
+        border-image-source: none;
58
+        border-image-slice: 100% 100% 100% 100%;
59
+        border-image-width: 1 1 1 1;
60
+        border-image-outset: 0 0 0 0;
61
+        border-image-repeat: stretch stretch;
62
+        padding: 10px;
63
+        width: 100px;
64
+        height: 35px;
65
+        margin: 10px;
66
+      }
67
+      /* specific position of each pou*/
68
+      #pou1 {
69
+        position:absolute;
70
+        top:80px;
71
+        left:50px;
72
+      }
73
+      #pou2 {
74
+        position:absolute;
75
+        top:255px;
76
+        left:130px;
77
+      }
78
+      #pou3 {
79
+        position:absolute;
80
+        top:395px;
81
+        right:280px;
82
+      }
83
+      #pou4 {
84
+        position:absolute;
85
+        bottom:5px;
86
+        left:45px;
87
+      }
88
+      #pou5 {
89
+        position:absolute;
90
+        top:120px;
91
+        right:360px;
92
+      }
93
+      #pou6 {
94
+        position:absolute;
95
+        bottom:130px;
96
+        left:440px;
97
+      }
98
+      #pou7 {
99
+        position:absolute;
100
+        top:170px;
101
+        right:100px;
102
+      }
103
+      /* div{i} are the div's which contain the text */
104
+      #div1, #div2, #div3, #div4, #div5, #div6, #div7 {
105
+        width: 100px;
106
+        height: 35px;
107
+        margin: 10px;
108
+        padding: 10px;
109
+        border: 1px solid #aaaaaa;
110
+      }
111
+      /* drag{i} are the draggable text itself */
112
+      #drag1, #drag2, #drag3, #drag4, #drag5, #drag6, #drag7 { background-color: #FBFF8A;}
113
+      /* CSS of the image */
114
+      img.displayed {
115
+       display: block;
116
+       margin-left: auto;
117
+       margin-right: auto;
118
+      }
119
+      /* image description footnote CSS */
120
+      p.image-description {
121
+       font-size: small;
122
+       text-align: center;
123
+      }
124
+      /*  #nivell and #area are the div's which indicate level and area of the exercise (eg. Primary School and Mathematics, respectively */
125
+      #nivell, #area { background-color: #eee; font-size: 14px; color: #333; padding: 3px 14px; text-shadow: 1px 1px 0px #fff; }
126
+      /* simply image and image-description container CSS*/
127
+      #imgcontainer { position:relative; }
128
+      /* nota CSS. It's for notes bellow image. It's just for more information on exercise unit*/
129
+      div .nota {
130
+        background-color: #eee;
131
+        font-size: 14px;
132
+        color: #333;
133
+        padding: 3px 14px;
134
+        text-shadow: 1px 1px 0px #fff;
135
+      }
136
+      /* paraulaclau (keyword in english) is for marking important words in .nota div. */
137
+      .paraulaclau {
138
+        font-weight:bold;
139
+        font-style: italic;
140
+        text-decoration:overline underline;
141
+      }
142
+    </style>
143
+    <script type="text/javascript">
144
+     // answers. Each pou has its answer
145
+     var resposta = new Object();
146
+     resposta['pou1'] = "U";
147
+     resposta['pou2'] = "Dos";
148
+     resposta['pou3'] = "Tres";
149
+     resposta['pou4'] = "Quatre";
150
+     resposta['pou5'] = "Cinc";
151
+     resposta['pou6'] = "Sis";
152
+     resposta['pou7'] = "Set";
153
+
154
+     // drag and drop functions
155
+     function allowDrop(ev) {
156
+       ev.preventDefault();
157
+     }
158
+
159
+     function drag(ev) {
160
+        ev.dataTransfer.setData("Text",ev.target.id);
161
+     }
162
+
163
+     function drop(ev) {
164
+        ev.preventDefault();
165
+        var data=ev.dataTransfer.getData("Text");
166
+        ev.target.appendChild(document.getElementById(data));
167
+     }
168
+
169
+     function droppou(ev) {
170
+        ev.preventDefault();
171
+        var data=ev.dataTransfer.getData("Text");
172
+        var contingut = document.getElementById(data).textContent;
173
+        if (contingut == resposta[ev.target.id]) {
174
+          ev.target.appendChild(document.getElementById(data));
175
+          ev.target.setAttribute("style", "background-color: rgba(91,220,116,0.5);");
176
+          // if the answer is correct, then paint it with green with 0.5 of transparency
177
+        }
178
+        else {
179
+          ev.target.appendChild(document.getElementById(data));
180
+          ev.target.setAttribute("style", "background-color: rgba(291,23,43,0.5);");
181
+          // otherwise, paint it with it with red with 0.5 of transparency
182
+        }
183
+     }
184
+    </script>
185
+  </head>
186
+  <body>
187
+    <div class="wrapper">
188
+	<div class="header">
189
+		<a class="logo roundbottom" href="link-to-your-project">your project
190
+			<span>unit title</span>
191
+		</a>
192
+		<ul class="nav">
193
+			<li id="nivell">Level: Basic</li>
194
+			<li id="area">Area: Languages</li>
195
+		</ul>
196
+	</div>
197
+        <h1>The numbers: english - catalan</h1>
198
+            <div id="instruccions"><p>Drag and drop the numbers in catalan to the boxes around the numbers in english</p></div>
199
+            <br/>
200
+        <div class="twocolrighta">
201
+            <div class="column first">
202
+             <div id="imgcontainer">
203
+              <div>
204
+               <!--The image should have 800x486 resolution or 800x{anything} -->
205
+               <img class="displayed" src="image.png" alt="The numbers in english from 1 to 7">
206
+               <p class="image-description">The numbers in english from 1 to 7</p>
207
+              </div>
208
+              <div class="pou" id="pou1" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
209
+              <div class="pou" id="pou2" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
210
+              <div class="pou" id="pou3" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
211
+              <div class="pou" id="pou4" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
212
+              <div class="pou" id="pou5" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
213
+              <div class="pou" id="pou6" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
214
+              <div class="pou" id="pou7" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
215
+             </div>
216
+             <div class="nota"><p>Notes:
217
+		<ul class="disc">
218
+                  <li>The numbers are <span class="paraulaclau"><a href="http://en.wikipedia.org/wiki/Infinity">infinite</a></span></li>
219
+                  <li>In english, the numbers upto 10 are: one, two, three, four, five, six, seven, eight, nine, ten</li>
220
+                </ul>
221
+             </div>
222
+            </div>
223
+            <div class="column last sidecol">
224
+             <div>
225
+              <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
226
+                <div id="drag1" draggable="true" ondragstart="drag(event)" width="88" height="31">U</div>
227
+              </div>
228
+              <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
229
+                <div id="drag2" draggable="true" ondragstart="drag(event)" width="88" height="31">Dos</div>
230
+              </div>
231
+              <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
232
+                <div id="drag3" draggable="true" ondragstart="drag(event)" width="88" height="31">Tres</div>
233
+              </div>
234
+              <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
235
+                <div id="drag4" draggable="true" ondragstart="drag(event)" width="88" height="31">Quatre</div>
236
+              </div>
237
+              <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
238
+                <div id="drag5" draggable="true" ondragstart="drag(event)" width="88" height="31">Cinc</div>
239
+              </div>
240
+              <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
241
+                <div id="drag6" draggable="true" ondragstart="drag(event)" width="88" height="31">Sis</div>
242
+              </div>
243
+              <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
244
+                <div id="drag7" draggable="true" ondragstart="drag(event)" width="88" height="31">Set</div>
245
+              </div>
246
+             </div>
247
+            </div>
248
+        </div>
249
+     <div class="footer">
250
+        <ul>
251
+          <li><a href="./link-to-your-repository">source code</a></li>
252
+          <li><a href="./sources.textile">sources of information</a></li>
253
+          <li><a href="./LICENSE.textile">license</a></li>
254
+          <li><a href="./about.html">about</a></li>
255
+        </ul>
256
+     </div>
257
+  </div>
258
+  </body>
259
+</html>

+ 1
- 5
qfer.textile View File

@@ -13,13 +13,9 @@ h2. Mitjà termini
13 13
 h2. Llarg termini
14 14
 
15 15
 h3. Funcionalitats
16
+
16 17
 # tocar un so depenent de si la resposta és correcte o no
17 18
 # posar compte enrera o marcar el temps que tardes a partir de la primera peça que mous
18 19
 # poder introduir els noms dels alumnes i que automàticament canviï de nom
19 20
 # afegir puntuació: afegir +1 quan encertis i -1 quan fallis a la puntuació total
20 21
 
21
-h2. Projecte
22
-
23
-# Escriure les instruccions per a aprofitar el projecte:
24
-## documentar com canviar el codi per a generar noves proves (canviar els #drag{i}, ...)
25
-## afegir una exercici en blanc (sense imatge i amb paraules sense sentit, títol "title", etc.) -> plantilla

Loading…
Cancel
Save