Browse Source

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

master
Xavier 7 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:
h3. Directories

* 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.
* 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).
* 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.
* 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.
* 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).

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


BIN
exers/template/image.png View File


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

@@ -0,0 +1,259 @@
<html>
<head>
<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;
text-align:center;
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 {
position:absolute;
top:80px;
left:50px;
}
#pou2 {
position:absolute;
top:255px;
left:130px;
}
#pou3 {
position:absolute;
top:395px;
right:280px;
}
#pou4 {
position:absolute;
bottom:5px;
left:45px;
}
#pou5 {
position:absolute;
top:120px;
right:360px;
}
#pou6 {
position:absolute;
bottom:130px;
left:440px;
}
#pou7 {
position:absolute;
top:170px;
right:100px;
}
/* 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-weight:bold;
font-style: italic;
text-decoration:overline underline;
}
</style>
<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) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

function droppou(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var contingut = document.getElementById(data).textContent;
if (contingut == resposta[ev.target.id]) {
ev.target.appendChild(document.getElementById(data));
ev.target.setAttribute("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 {
ev.target.appendChild(document.getElementById(data));
ev.target.setAttribute("style", "background-color: rgba(291,23,43,0.5);");
// otherwise, paint it with it with red with 0.5 of transparency
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<a class="logo roundbottom" href="link-to-your-project">your project
<span>unit title</span>
</a>
<ul class="nav">
<li id="nivell">Level: Basic</li>
<li id="area">Area: Languages</li>
</ul>
</div>
<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>
<br/>
<div class="twocolrighta">
<div class="column first">
<div id="imgcontainer">
<div>
<!--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>
<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>
<div class="nota"><p>Notes:
<ul class="disc">
<li>The numbers are <span class="paraulaclau"><a href="http://en.wikipedia.org/wiki/Infinity">infinite</a></span></li>
<li>In english, the numbers upto 10 are: one, two, three, four, five, six, seven, eight, nine, ten</li>
</ul>
</div>
</div>
<div class="column last sidecol">
<div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)" width="88" height="31">U</div>
</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>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag3" draggable="true" ondragstart="drag(event)" width="88" height="31">Tres</div>
</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>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag5" draggable="true" ondragstart="drag(event)" width="88" height="31">Cinc</div>
</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>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag7" draggable="true" ondragstart="drag(event)" width="88" height="31">Set</div>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<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>
</ul>
</div>
</div>
</body>
</html>

+ 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

Loading…
Cancel
Save