Avatar billede drdegn Praktikant
10. oktober 2009 - 23:45 Der er 5 kommentarer og
1 løsning

Tilfældige billeder i quiz

Hej. Jeg har brug for at lave en quiz/test som kan følgende:

1. Der vises et tilfældigt billede (f.eks. spørgsmål_07.jpg), hvis indhold brugeren skal identificere
2. Brugeren når frem til et gæt og idet han (eller hun) holder musen henover billedet kommer et nyt billede frem som indeholder svarret (svar_07.jpg). Når musen ikke holdes over billedet, skiftes tilbage til det oprindelige (spørgsmål_07.jpg)
3. Når brugeren klikker på "næste" eller reload, skiftes til næste tilfældige spørgsmål (f.eks. spørgsmål_98.jpg) osv.

Kan det programmeres i PHP. Det er vigtigt at billedparrene kommer tilfældigt

Mvh drdegn
Avatar billede Slater Ekspert
11. oktober 2009 - 00:05 #1
Nemt ja. Hvis du ved hvor mange forskellige billeder du har, kan du få et tilfældigt nummer med rand(1, $highest_number);

Hvor meget ved du om PHP? Altså, hvor meget hjælp skal du have med at implementere det?
Avatar billede drdegn Praktikant
11. oktober 2009 - 01:57 #2
Jeg ved lidt, d.v.s. har brug for den endelige fulde kode
Avatar billede Slater Ekspert
11. oktober 2009 - 10:31 #3
Det her er en meget simpel løsning, der burde virke - selvom den lige er skrevet efter hukommelse, da jeg ikke kan teste den her.

Du kan bare lave et link på billederne, der loader samme side man er på, for at få den til at generere nye tilfældige sæt.
~

<?php

define('highest_number', 100);  // højeste tal et sæt kan have.

$r = rand(1, highest_number);
$path1 = 'quizimages/question_' . $r . '.jpg';
$path2 = 'quizimages/answer_' . $r . '.jpg';

?>

<img src="<?php echo $path1; ?>" alt="" id="question">
<img src="<?php echo $path2; ?>" alt="" id="answer">

<script type="text/javascript">

document.getElementById('question').onmouseover = function() {
    document.getElementById('answer').style.display = 'block';
    document.getElementById('question').style.display = 'none';
}
document.getElementById('answer').onmouseout = function() {
    document.getElementById('answer').style.display = 'none';
    document.getElementById('question').style.display = 'block';
}

</script>
Avatar billede Slater Ekspert
11. oktober 2009 - 10:32 #4
- Nåja, du skal selvfølgelig også lige sætte
#answer { display: none; } - i CSS, for at denne løsning virker, men jeg går ud fra du har tjek på alt andet end PHP'en.
Avatar billede drdegn Praktikant
11. oktober 2009 - 13:22 #5
Kære Viperine

Tusind tak for hjælpen, det var lige præcist det som jeg havde brug for og tak for det hurtige svar.

Mvh drdegn
Avatar billede drdegn Praktikant
11. oktober 2009 - 13:29 #6
Det er sikkert også ret let at få billederne centreret og baggrunden sort, har du mulighed for at tilføje denne linie?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester