En frågesport på hemsidan
Det finns många program som man kan använda för att göra frågeformulär
eller frågesporter till hemsidan, men det är roligare att göra alltsammans
själv. Då kan man anpassa sidan precis som man själv vill ha den.
Här går jag igenom hur man gör. Du kan också testa en färdig sida med 12 frågor och
hämta koden nedan som ZIP-fil.
Testa ett frågeformulär
Hämta koden
Observera
Radbrytningarna i kodblocken nedan blir olika beroende på skärmupplösning och
webbläsare. Om du hämtar koden via länken ovan och öppnar textfilen som
ZIP-filen innehåller, kan du vara säker på att radbrytningarna blir som de
skall vara.
Så här fungerar det
Frågesporten visar först en sida med frågorna.
När besökaren har klickat in sina svar, kan han kontrollera om svaren är
rätt.
Detta visas i ett popup-fönster, som skapas av ett JavaScript på sidan med
frågorna. Skriptet bygger upp hela svarssidan, med stilmall och allt.
Men först tar vi
den inledande HTML-koden till sidan som skall visa frågorna:
<HTML>
<HEAD>
<TITLE>Gör frågesport</TITLE>
<STYLE TYPE="text/css">
BODY {background-color:#FBF9F9;}
H1 {text-align:center;color:#008000;font-family:"times new roman", serif;font-size:18pt;}
H3 {text-align:center;color:Green;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12pt;}
H4 {text-align:center;color:#483D8B;font-family:"times new roman", serif;font-size:12pt;
margin-bottom:0px;margin-top:0px;}
P {margin:1em;color:#000000;font-family:arial, sans-serif;font-size:10pt;}
B {color:#008000;font-family:arial, sans-serif;font-size:10pt;}
</STYLE>
Här ligger en lokal stilmall i HEAD-taggen. Om du redan använder stilmallar på alla dina sidor kan du hoppa över den här
stilmallen och koppla sidan till den globala stilmallen på vanligt sätt.
Men om dina sidor inte använder stilmallar, bör du ändå utnyttja en sådan
just här. Då slipper du alla FONT-taggarna längre ned på sidan och koden
blir betydligt lättare att läsa.
JavaScript
Direkt efter stilmallen kommer skriptet. Jag har delat upp det för att
kunna förklara en bit i taget. Alla rader som börjar med // är
kommentarsrader som inte påverkar skriptkörningen:
<SCRIPT LANGUAGE="JavaScript">
<!-- Karin Andersson för SupportData.Net karin@supportdata.net
// Deklarera en variabel för varje fråga – i det här fallet 2 frågor.
var Svar1 = new String
var Svar2 = new String
// Den här funktionen kontrollerar svaren.
function KollaSvar()
{
// Variabeln "i" räknar antalet korrekta svar och sätts från början till 0.
var i = 0;
// Variabeln antal anger det totala antalet frågor.
antal = 2
Deklarera variabler och funktionen
Jag deklarerar först variablerna "Svar1" och "Svar2" -
lika många variabler som frågor. Sedan deklarerar jag funktionen KollaSvar()
som skall kontrollera svaren och skapa popup-fönstret. Slutligen deklarerar
jag variabeln "i", som kommer att räkna antalet korrekta svar, och
variabeln "antal" som anger det totala antalet frågor.
Skriptet fortsätter med den del som skriver HEAD-elementet i det nya
fönstret:
// Här anges vilka egenskaper
popup-fönstret skall ha.
// Alternativen kan anges i en enda rad eller delas i flera rader.
// Jag har delat upp alternativen på två rader,
// för att visa hur det skall se ut.
svarsruta = "toolbar=0,location=0,directories=0,status=0,"
svarsruta+= "menubar=0,height=310,width=370,scrollbars=1,resizable=1"
// Här öppnas fönstret med svaren.
Svar = window.open("","msgWindow",svarsruta)
Svar.opener=window;
Svar.opener.name="opener";
Svar.document.clear;
// Raderna Svar.document.write skriver HTML-koden till
// HEAD-elementet i det nya fönstret.
// Jag har delat upp detta på sex rader, men allt kan
// läggas i en enda rad utan radbrytning.
// HEAD-elementet innehåller en stilmall där jag anger
// egenskaperna för bakgrundsfärg, två rubriknivåer,
// P-taggen och B-taggen.
Svar.document.write("<HEAD><TITLE>Svar...</TITLE>");
Svar.document.write("<STYLE TYPE='text/css'>BODY {background-color:#FBF9F9;}");
Svar.document.write("H1 {text-align:center;color:#008000;font-family:'times new roman',serif;font-size:18pt;}");
Svar.document.write("H3 {text-align:center;color:Green;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12pt;}");
Svar.document.write("P {margin:1em;color:#000000;font-family:arial, sans-serif;font-size:10pt;}");
Svar.document.write("B {color:#008000;font-family:arial, sans-serif;font-size:10pt;}</STYLE></HEAD>");
Egenskaper på fönstret samt en stilmall
Den här koden anger hur popup-fönstret skall se ut och vilka egenskaper det
skall ha. I variabeln "svarsruta" har jag satt de flesta
egenskaperna till 0. Alla egenskaper anges med 1 (egnskapen används) eller 0
(egenskapen används inte), utom höjd och bredd som anges i pixlar:
toolbar Webbläsarens verktygsrad visas (1) eller
visas inte (0)
location Webbläsarens adressfält visas (1) eller
visas inte (0)
directories Webbläsarens verktygsrad visas (1) eller
visas inte (0)
status Webbläsarens statusrad visas (1) eller visas
inte (0)
menubar Webbläsarens menyrad visas (1) eller visas
inte (0)
height Höjden på fönstret i pixlar
width Bredden på fönstret i pixlar
scrollbars Webbläsarens rullningslister visas (1 -
rekommenderas) eller visas inte (0)
resizable Besökaren kan (1 – rekommenderas) eller kan
inte (0) ändra fönstrets storlek
Svar.document.write
Det här är koden som skriver HEAD-elementet i popup-fönstret. För att det
nya fönstret skall visas snyggt, har jag lagt in en stilmall i koden. Du kan
lägga hela koden i en enda rad som börjar med Svar.document.write(" och
slutar med "); Där emellan tar du bort alla parentestecken.
Sedan kommer koden som skriver början på BODY-elementet:
// Här skrivs HTML-koden till BODY-elementet.
Svar.document.write('<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
')
Svar.document.write("<H1>Svar...</H1>");
//Korrekta och felaktiga svar visas i en lista.
if (Svar1.toLowerCase()=="a")
{
// De korrekta svaren räknas ihop och variabeln "i" ökas med 1 för varje
// riktigt svar. Bokstaven "a" i if-satsen anger vilket svar som är det
rätta.
// Om svaret är korrekt visas "Rätt" efter frågans nummer.
i+=1;
Svar.document.write("<P><B>Fråga 1:</B> Rätt</P>");
}
else
{
// Om svaret var fel, visas det korrekta svaret med eventuell kommentar.
Svar.document.write("<P><B>Fråga 1:</B> Fel. Rätt svar är
februari, som har 28 eller 29 dagar medan alla andra har minst 30.</P>");
}
if (Svar2.toLowerCase()=="c")
{
i+=1;
Svar.document.write("<P><B>Fråga 2:</B> Rätt</P>");
}
else
{
Svar.document.write("<P><B>Fråga 2:</B> Fel. Rätt svar är Nidhögg.</P>");
}
// Här skrivs hur många svar som var korrekta i förhållande till totala
antalet frågor.
Svar.document.write("<H3>Du svarade rätt på "+i.toString()+" av "+antal+" frågor.</H3>");
Vi tittar närmare på några delar av koden:
if (Svar1.toLowerCase()=="a")
Betyder ungefär "om
svaret är lika med a". Här skall du alltså ange bokstaven för rätt
svarsalternativ i formuläret
längre ned på sidan.
i+=1;
Variabeln "i" ökas med 1 för varje svar som är
rätt.
Svar.document.write("<P><B>Fråga 1:</B> Rätt</P>");
Det här talar om att svaret var rätt.
Svar.document.write("<P><B>Fråga 1:</B> Fel. Rätt svar är
februari, som har ...</P>");
Det här talar om att svaret var fel. Du ger dessutom det korrekta svaret och gärna en förklaring till varför just det svaret var det riktiga.
Viktigt med citationstecknen
En viktig detalj är hur du använder citationstecken. Eftersom hela
kodavsnittet i Svar.document.write omges av citationstecken, kan du inte
använda samma typ av citationstecken inne i svaret.
Om det till exempel står ("<P><B>Fråga 1:</B> Fel. Ordet
"lunae" betyder måne.</P>") kommer du att få ett
skriptkörningsfel och svarssidan visas inte. Byt då till enkla
citationstecken (') alldeles innanför parenteserna.
Svar.document.write("<H3>Du svarade rätt på "+i.toString()+" av "+antal+" frågor.</H3>");
Det
här kommer att skriva ut hur många svar som var rätt och hur många frågor
det totalt fanns.
Den sista delen av skriptet och avslutningen på HEAD-elementet:
// En Stäng-knapp läggs in under listan med svaren.
Svar.document.write('<P><FORM name="svarsform"><input type="button" value="Stäng"
name="avsluta" OnClick="window.close()"></FORM></P>');
// En e-postlänk läggs till längst ned och popup-fönstrets kod avslutas.
Svar.document.write('<P><a href="mailto:karin@supportdata.net">Skriv
till SupportData.Net</A>')
Svar.document.write('</P></BODY></HTML>');
}
// -->
</SCRIPT>
</HEAD>
Besökaren får en knapp för att stänga popup-fönstret
och längst ned på sidan placerar du din e-postadress. Sedan avslutas skriptet och
HEAD-elementet.
BODY-elementet
Därmed kan vi gå över till det som skall visas på sidan med frågorna.
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<TABLE width="625" border="0">
<TR><TD width="100%">
<H1>Frågesport</H1>
<H4>Av Ditt namn</H4>
<H3>Om livet (titeln på frågesporten)</H3>
<HR width=75% align=center>
<FORM name="form1">
<B>1. Vad heter den kortaste månaden?</B>
<P><INPUT type="radio" name="Alt1" onClick="Svar1='a'">Februari<BR>
<INPUT type="radio" name="Alt1" onClick="Svar1='b'">Mars<BR>
<INPUT type="radio" name="Alt1" onClick="Svar1='c'">April<BR>
<INPUT type="radio" name="Alt1" onClick="Svar1='d'">Maj</P>
<B>2. Vad heter draken i nordiska gudasagan?</B>
<P><INPUT type="radio" name="Alt2" onClick="Svar2='a'">Majros<BR>
<INPUT type="radio" name="Alt2" onClick="Svar2='b'">Fjalar<BR>
<INPUT type="radio" name="Alt2" onClick="Svar2='c'">Nidhögg<BR>
<INPUT type="radio" name="Alt2" onClick="Svar2='d'">Vanvede</P>
<P><INPUT type="button" value="Svara" name="Kontroll" onClick="KollaSvar()"></P>
</FORM>
</TD></TR></TABLE>
</BODY>
</HTML>
Eftersom hela sidan styrs av en stilmall, behövs inga
FONT-taggar eller liknande. Vi kan koncentrera oss på innehållet i stället.
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Att använda både topmargin/leftmargin och marginwidth/marginheight kan synas
som kaka-på-kaka, men det gör att sidan visas utan marginaler i både
Internet Explorer och Netscape.
<TABLE WIDTH="640" border="0">
Ange alltid både bredd och rambredd på tabeller, även om du inte vill ha
någon ram alls.
<FORM name="form1">
Här börjar formuläret som visar frågorna och svarsalternativen.
<B>1. Vad heter den kortaste månaden?</B>
Det här är den första frågan. Eftersom stilmallen för sidan säger att
P-taggar skall visas med indrag, medan B-taggar utanför P-taggar inte berörs
av detta, kommer frågorna att visas längst ut till vänster medan
svarsalternativen får ett indrag.
<P><INPUT type="radio" name="Alt1" onClick="Svar1='a'">Februari<BR>
Det här är det första svarsalternativet. Observera att "name"
skall vara detsamma på alla alternativen inom varje fråga, medan däremot de
olika alternativen får varsin bokstav (a – d). "Svar1" får sitt
värde när besökaren klickar i ett av alternativen.
<INPUT type="radio" name="Alt1" onClick="Svar1='d'">Maj</P>
Det här är sista svarsalternativet i första frågan. Du kan lägga till
fler alternativ genom att använda fler input-rader. Sätt taggen <BR> i
slutet av varje rad utom i den sista, där du använder </P>. Se till
att varje rad får ett eget värde på Svar1. Detta värde skall skickas till
funktionen i javaskriptet.
<P><INPUT type="radio" name="Alt2" onClick="Svar2='a'">Majros<BR>
Första svarsalternativet i den andra frågan. Här är det i stället
"Svar2" som får ett värde.
</FORM>
Här avslutas formuläret, varpå tabellen, BODY-elementet och hela
HTML-dokumentet avslutas.
Svårare än så här behöver det alltså inte vara att göra en
frågesport. Läs igenom koden igen, så att du ser hur du kan ändra den.
Testa ett frågeformulär
Hämta koden
© SupportData.Net
|