Izrada kvizova i Hot Potatoes

 

 

 

za početnike             za napredne korisnike             video

 

Za početnike

 

Hot Potatoes je skupina od 6 programa (aplikacija) koji omogućuju brzu i jednostavnu izradu interaktivnih kvizova u obliku web-stranica.
Nakon što se kviz izradi, pokrenuti i rješavati ga može i onaj tko nema Hot Potatoes. Dovoljno je imati bilo koji web preglednik (Mozilla Firefox, Chrome, Internet Explorer itd.) i u njemu se može pokrenuti kviz.
Hot Potatoes je potreban samo za izradu ili za naknadne izmjene u kvizu.

Hot Potatoes možete besplatno preuzeti odavde.

Uobičajeno je kod izrade kviza ubaciti više pitanja nego što će biti prikazano kod izvođenja kviza. Ponovnim pokretanjem kviza pitanja se pojavljuju u novom redoslijedu, odnosno mogu se pojaviti skroz druga pitanja od onih koja su bila kod prošlog izvođenja. Što je autor više pitanja ubacio, to je veća vjerojatnost da će svaki put kod novog izvođenja biti druga pitanja u kvizu. Zbog toga se preporučuje autorima da ubace što više pitanja, a rješavačima da riješe isti kviz više puta. Kviz se ponovo pokreće tako da nakon završetka ponovo otvorimo istu web stranicu ili da ju jednostavno osvježimo (tipka F5).

Pomoću ponuđenih 6 dijelova (aplikacija) Hot Potatoesa mogu se izrađivati razne vrste kvizova.
Dijelovi HotPotatoesa su:

  • JClose – za izradu zadataka u kojima treba dopuniti tekst
    primjer takvog kviza
    pripadna jcl datoteka

    Napomena: Ako imate problema s preuzimanjem jcl datoteke (zadnji link prije ovog retka), napravite desni klik na taj link, pa izaberite Save Link As ili što vam (slično tome) Vaš preglednik nudi, a nakon toga izaberite mjesto gdje će Vam se to snimiti...


  • JMatch – za stvaranje zadataka u kojima treba spariti riječi, pojmove ili slike
    primjer takvog kviza
    pripadna jmt datoteka

    Napomena 1.: otvorite više puta isti kviz i uočite da su kod ponovnog pokretanja drugi zadaci (ili drugi redoslijed).

    Napomena 2.: Ako imate problema s preuzimanjem jmt datoteke (zadnji link), napravite desni klik na taj link, pa izaberite Save Link As ili što vam (slično tome) Vaš preglednik nudi, a nakon toga izaberite mjesto gdje će Vam se to snimiti...


  • JQuiz – za izradu kviza s pitanjima (sa ili bez ponuđenih odgovora)
    primjer takvog kviza
    pripadna jqz datoteka

    Napomena 1.: otvorite više puta isti kviz i uočite da su kod ponovnog pokretanja drugi zadaci (ili drugi redoslijed).

    Napomena 2.: Ako imate problema s preuzimanjem jmt datoteke (zadnji link), napravite desni klik na taj link, pa izaberite Save Link As ili što vam (slično tome) Vaš preglednik nudi, a nakon toga izaberite mjesto gdje će Vam se to snimiti...


  • JCross – za izradu križaljki
    primjer takvog kviza
    pripadna jcw datoteka

    Napomena: Ako imate problema s preuzimanjem jcw datoteke (zadnji link prije ovog retka), napravite desni klik na taj link, pa izaberite Save Link As ili što vam (slično tome) Vaš preglednik nudi, a nakon toga izaberite mjesto gdje će Vam se to snimiti...


  • JMix – za kvizove s pomiješanim redoslijedom
    primjer takvog kviza
    pripadna jmx datoteka

    Napomena 1.: otvorite više puta isti kviz i uočite da su kod ponovnog pokretanja drugi zadaci (ili drugi redoslijed).

    Napomena 2.: Ako imate problema s preuzimanjem jmt datoteke (zadnji link), napravite desni klik na taj link, pa izaberite Save Link As ili što vam (slično tome) Vaš preglednik nudi, a nakon toga izaberite mjesto gdje će Vam se to snimiti...


  • The Masher – za povezivanje kvizova u složeniju cjelinu (može se koristiti samo uz komercijalnu licencu)


Za učenje Hot Potatoesa preporučam sljedeće izvore:



Najtoplije zahvaljujem kolegicama:
Lidiji Blagojević - na dozvoli da preuzmem prezentaciju o izradi kvizova i ponudim ju na ovoj stranici kao izvor za učenje,
Miri Čuvidić - što mi je poslala nekoliko kvizova da ih kao ogledne primjerke objavim na ovoj web stranici.

 

 

 

 

 

Za napredne korisnike

vrh ↑

 

Jeste li znali da kod izrade kvizova, unutar Hot Potatoesa možemo upisivati i HTML kôd?
Zašto je to bitno?
Pa zato što nam HTML omogućava ispisivanje raznih matematičkih simbola i grčkih slova (npr.   ≤ , ≥ , ≠ , ≅ , ∼ , ⊥ , α , β , π , ± , · , √ , ...), pisanje indeksa i eksponenata, a isto tako i ubacivanje većeg razmaka između riječi, praznih redova (ako želimo odvojiti neke odlomke) itd.

 

Ovdje možete vidjeti primjer kako u Hot Potatoes ubaciti HTML kodove, te što se tada vidi u samom kvizu:
jqz datoteka sa HTML kodovima
pripadni kviz
Ako do sad niste radili u HTML-u, preporučam da prije pregledavanja donje tablice pogledate gornji primjer kviza, da jednostavno dobijete osjećaj o tome što se uopće želi postići HTML kodom...

 

Evo i tablice nekih HTML kodova:

 

 

HTML kôd

 

 

Opis

 

Primjer
(u HTML-u)

 

 

Rezultat
(u web pregledniku)

<br>

 

ili

 

<br />

 

prijelaz u novi red

 

a
<br>
b
<br>
<br>
c


Možete pokušati i preglednije
(isti je rezultat):

 

a
<br>

b
<br>
<br>

c

...

a
b

c

&nbsp;

 

Razmak (npr. razmak
između riječi).
Koristi nam ako negdje želimo ubaciti više razmaka, tj. napraviti
jedan veliki razmak.
U desna 4 primjera uočite koji od njih rezultira velikim razmakom.

 

 

a b


a
&nbsp;
b


a      b


a
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
b

 

 

a b

a b

a b

a      b

<sup> </sup>

za ispisivanje eksponenta

 

a
<sup>
b
</sup>


može
<sup>
i više
</sup>
teksta

 

 

ab

možei više teksta

<sub> </sub>

za ispisivanje indeksa

 

v
<sub>
trokuta
</sub>


a
<sub>
1+2
</sub>

= a
<sub>
1
</sub>

+ a
<sub>
2
</sub>

 

vtrokuta


a1+2 = a1 + a2

 

<b> </b>

 

ili

 

<strong> </strong>

 

za podebljavanje teksta (bold)

 

Ja
<b>
volim
</b>
matematiku!

 

 

Ja volim matematiku!

 

 

<i> </i>

 

ili

 

<em> </em>

 

za nakošavanje teksta
(italic)

 

Ostadoh bez
<i>
dobrog
</i>
glasa!

 

 

Ostadoh bez dobrog glasa!

 

 

<u> </u>

 

za podvlačenje teksta
(underline)

 

nepodvučeno
<u>
podvučeno
</u>
, opet nepodvučeno

 

 

nepodvučeno podvučeno, opet nepodvučeno

 

 

 

 

kombinacija gornja tri taga;
uočite da ih zatvaramo redoslijedom suprotnim od redoslijeda otvaranja

 

<i><b>
Radi
</b></i>

ono što
<b><i><u>
voliš
</u></i></b>
!

 

 

Radi ono što voliš!

 

 

<span style="text-decoration:overline"> </span>

 

crta iznad teksta

 

<span style="text-decoration:overline">

neki tekst
</span>

 

 

neki tekst

 

 

<span style="text-decoration:line-through"> </span>

 

prekriženi tekst

 

<span style="text-decoration:line-through">
neki tekst
</span>

 

 

neki tekst

 

 

<hr>
  ili  
<hr />

 

vodoravna crta

 

<hr>

 

 


 

 

&le;

 

 


(manje ili jednako)

 

 

x
&le;
5

 

 

x ≤ 5

 

 

&ge;

 

 


(veće ili jednako)

 

 

x
&ge;
7

 

 

x ≥ 7

 

 

&lt;
     ili      
<

 

 

<
(manje)

 

 

x
&lt;
6

 

 

x < 6

 

 

&gt;
     ili      
>

 

 

>
(veće)

 

 

x
&gt;
8

 

 

x > 8

 

 

&ne;

 

 


(različito ili
nije jednako)

 

 

a
&ne;
b

 

 

a ≠ b

 

 

&asymp;

 

 


(približno jednako)

 

 

a
&asymp;
1.6 cm

 

 

a ≈ 1.6 cm

 

 

&plusmn;

 

 

±
(plus minus)

 

 

x = y
&plusmn;
0.03

 

 

x = y ± 0.03

 

 

&middot;
&bull;
&sdot;

 

 

·


(točkice - puta)

 

 

V = a
&middot;
b
&middot;
c


V = a
&bull;
b
&bull;
c


V = a
&sdot;
b
&sdot;
c

 

 

V = a · b · c


V = a • b • c

V = a ⋅ b ⋅ c

 

 

-
&mdash;
&minus;


 

 

-



(crtice - minus)

 

 

5
-
2 = 3


5
&mdash;
2 = 3


5
&minus;
2 = 3

 

 

5 - 2 = 3

5 — 2 = 3

5 − 2 = 3

 

 

&frac12;
&frac14;
&frac34;

 

 

½
¼
¾
(neki razlomci)

 

 

 

Još razlomaka (s kodovima) možete naći ovdje.

 

&radic;

 

 


(korijen)

 

 

&radic;
9 = 3

 

 

√ 9 = 3

 

 

&permil;

 

 


(promil)

 

 

0.5
&permil;

 

 

0.5 ‰

 

 

&alpha;
&beta;
&gamma;
&delta;
&epsilon;
&mu;
&pi;
&rho;
&Gamma;

 

 

α
β
γ
δ
ε
μ
π
ρ
Γ
(grčka slova)

 

 

&alpha;
= 60
&deg;


<font face="arial">&alpha;
,
&beta;
,
&gamma;
,
&delta;
,
&epsilon;
,
&mu;
,
&pi;
,
&rho;
,
&Gamma;</font>


<font face="Times New Roman">&alpha;
,
&beta;
,
&gamma;
,
&delta;
,
&epsilon;
,
&mu;
,
&pi;
,
&rho;
,
&Gamma;</font>


manji
<font face="Times New Roman" size="3px">&pi;</font>


veći
<font face="Times New Roman" size="6px">&pi;</font>


nagnuti
<i>&pi;</i>

(italic)


 

 

α = 60°


α, β, γ, δ, ε, μ, π, ρ, Γ





α, β, γ, δ, ε, μ, π, ρ, Γ




manji π



veći π



nagnuti π
(italic)

 

 

&deg;

 

 

°
(stupanj)
(Možemo ga dobiti i kombinacijom tipki
AltGr i 5).

 

 

&alpha;
= 60
&deg;

 

 

α = 60°

 

 

&ang;

 

 


(kut)

 

 

&ang;
AVB = 60
&deg;


<font size="5px">
&ang;</font>
AVB = 60
&deg;

 

 

∠ AVB = 60°


AVB = 60°

 

 

&Delta;

 

 

Δ
(grčko slovo delta,
ujedno i oznaka za trokut)

 

 

&Delta;
ABC


<i>&Delta;
ABC
</i>

 

 

Δ ABC

Δ ABC

 

 

&cong;
&sim;


 

 



(simboli za sukladnost
i sličnost)

 

 

&Delta;
ABC
&cong;
DEF


&Delta;
OPR
&sim;
UVZ

 

 

Δ ABC ≅ Δ DEF

Δ OPR ∼ Δ UVZ

 

 

&#8801;

 

 


(identički jednako)

 

 

A
&#8801;
A'

 

 

A ≡ A'

 

 

&perp;

 

 


(okomito)

 

 

a
&perp;
b

 

 

a ⊥ b

 

 

 

 

||
(usporedno ili paralelno)

 

 

Da biste ispisali uspravnu crtu, ne treba Vam HTML, već istovremeno stisnite tipku AltGr (desni Alt) i tipku W. Ponovite isti postupak još jednom i dobivate simbol za usporednost. :-)

 

 

a || b

 

 

&larr;
&rarr;
&#8614;
&harr;

&uarr;
&darr;
&#8597;

&lArr;
&rArr;
&hArr;

&dArr;
&uArr;
&#8661;


 

 


















(razne strelice)

 

 

 

Još strelica (s kodovima) možete naći ovdje.

 

 

 

 

[
]
{
}
(razne zagrade)

 

 

Da biste ispisali uglate i vitičaste zagrade, ne treba Vam HTML, već ih dobivate istovremenim kombinacijama tipaka:
AltGr + F
AltGr + G
AltGr + B
AltGr + N

 

 

100 - { 50 - [ 10 - ( 1+2 ) ] }

 

 

&infin;

 

 


(beskonačno)

 

 

< 0, +
&infin;
>

 

 

< 0, + ∞ >

 

 

&int;

 

 


(integral)

 

 

 

 

&cap;
&cup;

&isin;
&notin;

&times;


 

 







×

(simboli - skupovi)

 

 

 

 

&#9786;
&#9785;

 

 


 

 

<font size="6px" color="Magenta">&#9786;</font>

 

 

 

 

<!--         -->

 

 

Za upisivanje komentara unutar HTML koda.
Npr. ako sami sebi želite zapisati neki podsjetnik unutar koda (da se kasnije u kodu lakše snađete), takve komentare upisujete pomoću ovakvog koda, a na izlazu (u web pregledniku) se neće ništa od toga ispisati.

 

 

jedan, dva,
<!--
tri, četiri,
-->
pet, šest

 

 

jedan, dva, pet, šest

 

 

Ako želite mijenjati fontove i veličine slova (ili simbola) ili ako Vas zanima još što o HTML-u, preporučam pogledati ove stranice.
I ne zaboravite pogledati primjer iznad gornje tablice.

 

 

 

 

 

Video

vrh ↑

 

U ovom videu na jednom primjeru pokazujemo kako kod izrade kviza u JCloze-u (to je jedan od programa unutar Hot Potatoes-a) možemo koristiti HTML. Ovo je video za napredne korisnike JClozea.
Ovdje HTML koristimo u dvije svrhe:
1. da bismo potpisali željene objekte jedan ispod drugoga,
2. da bismo "kućice za upisivanje odgovora" napravili po želji uskima, tj. užima nego što nam dopušta sam JCloze.

Cilj opisan pod 1. postići ćemo upisivanjem (ili kopiranjem) HTML koda u sami JCloze, dakle ubacivanjem HTML koda kod samog stvaranja kviza.
Cilj opisan pod 2. postižemo tako da, nakon što smo u JClozeu stvorili kviz (html datoteku), otvorimo tu datoteku u Notepadu ili nekom programu za rad s HTML datotekama, te izvršimo izmjene u kodu kojeg je stvorio JCloze.
To su dva bitno različita koraka, različitih tipova, a oba spadaju u napredno korištenje JClozea i HTML-a.


 

 

 

 

 

vrh ↑