Browse Source

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

Xavier 8 years ago
6 changed files with 274 additions and 8 deletions
  1. +2
  2. +12
  3. +0
  4. BIN
  5. +259
  6. +1

+ 2
- 2
README.textile View File

@ -34,8 +34,8 @@ There are two sets of exercises, that I maintain in two separate git branches:
h3. Directories
* In "./stylesheets": there are CSS files for general presentation of pages. It's mainly used in gh-pages branch.
* In "./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).
* In "./exers": there are the exercises. Each exercise has specific CSS and javascript within.
* In "./docs": there are docs about project: Greetings, History, Instructions for adapt and modify the exercises (for fit to your needs), etc.
* In "./exers": there are the exercises. Each exercise has specific CSS and javascript within. There is also one example exercise (template exercise).
h3. Pattern of files

+ 12
- 1
docs/Instruccions.textile View File

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

+ 0
- 0
docs/template View File

exers/template/image.png View File

Before After
Width: 800  |  Height: 486  |  Size: 17 KiB

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

@ -0,0 +1,259 @@
<title>Unit title -> exercise title</title>
<!-- load external CSS stylesheets -->
<link rel="stylesheet" type="text/css" href="../../stylesheets/style.css" media="all" />
<!-- load internal CSS stylesheets -->
<style type="text/css">
/* instructions CSS */
#instruccions {
border: 1px solid #aaaaaa;
vertical-align: middle;
background-color: rgb(230, 241, 246);
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
/* pou CSS: are the div's placed on image in which we place the text */
.pou {
border: medium dotted rgb(102, 0, 51);
border-top-width: medium;
border-right-width-value: medium;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: medium;
border-left-width-value: medium;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: dotted;
border-right-style-value: dotted;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: dotted;
border-left-style-value: dotted;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: rgb(102, 0, 51);
border-right-color-value: rgb(102, 0, 51);
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: rgb(102, 0, 51);
border-left-color-value: rgb(102, 0, 51);
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
padding: 10px;
width: 100px;
height: 35px;
margin: 10px;
/* specific position of each pou*/
#pou1 {
#pou2 {
#pou3 {
#pou4 {
#pou5 {
#pou6 {
#pou7 {
/* div{i} are the div's which contain the text */
#div1, #div2, #div3, #div4, #div5, #div6, #div7 {
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
/* drag{i} are the draggable text itself */
#drag1, #drag2, #drag3, #drag4, #drag5, #drag6, #drag7 { background-color: #FBFF8A;}
/* CSS of the image */
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
/* image description footnote CSS */
p.image-description {
font-size: small;
text-align: center;
/* #nivell and #area are the div's which indicate level and area of the exercise (eg. Primary School and Mathematics, respectively */
#nivell, #area { background-color: #eee; font-size: 14px; color: #333; padding: 3px 14px; text-shadow: 1px 1px 0px #fff; }
/* simply image and image-description container CSS*/
#imgcontainer { position:relative; }
/* nota CSS. It's for notes bellow image. It's just for more information on exercise unit*/
div .nota {
background-color: #eee;
font-size: 14px;
color: #333;
padding: 3px 14px;
text-shadow: 1px 1px 0px #fff;
/* paraulaclau (keyword in english) is for marking important words in .nota div. */
.paraulaclau {
font-style: italic;
text-decoration:overline underline;
<script type="text/javascript">
// answers. Each pou has its answer
var resposta = new Object();
resposta['pou1'] = "U";
resposta['pou2'] = "Dos";
resposta['pou3'] = "Tres";
resposta['pou4'] = "Quatre";
resposta['pou5'] = "Cinc";
resposta['pou6'] = "Sis";
resposta['pou7'] = "Set";
// drag and drop functions
function allowDrop(ev) {
function drag(ev) {
function drop(ev) {
var data=ev.dataTransfer.getData("Text");;
function droppou(ev) {
var data=ev.dataTransfer.getData("Text");
var contingut = document.getElementById(data).textContent;
if (contingut == resposta[]) {;"style", "background-color: rgba(91,220,116,0.5);");
// if the answer is correct, then paint it with green with 0.5 of transparency
else {;"style", "background-color: rgba(291,23,43,0.5);");
// otherwise, paint it with it with red with 0.5 of transparency
<div class="wrapper">
<div class="header">
<a class="logo roundbottom" href="link-to-your-project">your project
<span>unit title</span>
<ul class="nav">
<li id="nivell">Level: Basic</li>
<li id="area">Area: Languages</li>
<h1>The numbers: english - catalan</h1>
<div id="instruccions"><p>Drag and drop the numbers in catalan to the boxes around the numbers in english</p></div>
<div class="twocolrighta">
<div class="column first">
<div id="imgcontainer">
<!--The image should have 800x486 resolution or 800x{anything} -->
<img class="displayed" src="image.png" alt="The numbers in english from 1 to 7">
<p class="image-description">The numbers in english from 1 to 7</p>
<div class="pou" id="pou1" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="pou" id="pou2" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="pou" id="pou3" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="pou" id="pou4" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="pou" id="pou5" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="pou" id="pou6" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="pou" id="pou7" ondrop="droppou(event)" ondragover="allowDrop(event)"></div>
<div class="nota"><p>Notes:
<ul class="disc">
<li>The numbers are <span class="paraulaclau"><a href="">infinite</a></span></li>
<li>In english, the numbers upto 10 are: one, two, three, four, five, six, seven, eight, nine, ten</li>
<div class="column last sidecol">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)" width="88" height="31">U</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag2" draggable="true" ondragstart="drag(event)" width="88" height="31">Dos</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag3" draggable="true" ondragstart="drag(event)" width="88" height="31">Tres</div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag4" draggable="true" ondragstart="drag(event)" width="88" height="31">Quatre</div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag5" draggable="true" ondragstart="drag(event)" width="88" height="31">Cinc</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag6" draggable="true" ondragstart="drag(event)" width="88" height="31">Sis</div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag7" draggable="true" ondragstart="drag(event)" width="88" height="31">Set</div>
<div class="footer">
<li><a href="./link-to-your-repository">source code</a></li>
<li><a href="./sources.textile">sources of information</a></li>
<li><a href="./LICENSE.textile">license</a></li>
<li><a href="./about.html">about</a></li>

+ 1
- 5
qfer.textile View File

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