Like Khan Academy but more more more simple and always with drag and drop things.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

259 lines
9.9 KiB

<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>