Ga naar inhoud

Aircraft Recognition Quiz

cyclodries

Door cyclodries
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

cyclodries Groentje

cyclodries

Geplaatst:
  • Auteur
Geplaatst:

dit is wat ik nu heb...

best al leuk... maar ik ben er zeker van dat jullie nog bedenkingen hebben! :P

twee vraagjes nog wel...

1) is er een kort stukje code dat een foto (onafhankelijk van zijn originele grootte) kan beperkten qua grootte... ik heb nu bv een foto van google die plots mijn hele scherm vult...

2) de titel van de foto staat nu steeds naast de foto... ik zie niet meteen wat ik moet verwijderen om dit weg te krijgen...

bedankt alleszinds al voor alle hulp!

Het komt de natie zeker ten goede! :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Aircraft Recognition</title>

<script type="text/javascript">

function test()

{

var image = document.getElementById("image").src;

var antwoord = "";

if(image.indexOf("1.jpg") >= 0){

antwoord = "F-16 Fighting Falcon"

}

if(image.indexOf("2.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("3.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("4.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("5.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("6.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("7.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("8.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("9.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("10.jpg") >= 0){

antwoord = "SAAB Gripen";

}

var control = document.getElementById("contr")

if (control.value == antwoord){

confirm("juist")

document.location.reload(true)

}

else

{

confirm("fout")

document.location.reload(true)

}

}

</script>

</head>

<body bgcolor="#999999">

<h1 align="center">Aircraft Recognition</h1>

<center>

<p><script language="JavaScript"><!--

var pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

var picture = pictures[Math.floor(Math.random() * pictures.length)];

document.write('<img src="' + picture + '" id="image"/>');

document.write(picture);

// --></script><noscript><img src="4.jpg"/></noscript></p>

<form name="naam">

<input type="text" name="tekstregel" size="25" id="contr"/>

<input type="button" value="OK" onClick="test()"/>

</form>

</center>

</body>

</html>

Link naar reactie
Delen op andere sites
  • Reacties 20
  • Aangemaakt
  • Laatste reactie

Beste reacties in dit topic

Populaire dagen

Beste reacties in dit topic

Populaire dagen

ecence Meewerkend lid

ecence

Geplaatst:
Geplaatst: (aangepast)

<!DOCTYPE html>

<html xmlns="XHTML namespace">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Aircraft Recognition</title>

<script type="text/javascript">

function test()

{

var image = document.getElementById("image").src;

var antwoord = "";

if(image.indexOf("1.jpg") >= 0){

antwoord = "F-16 Fighting Falcon"

}

if(image.indexOf("2.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("3.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("4.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("5.jpg") >= 0){

antwoord = "F-16 Fighting Falcon";

}

if(image.indexOf("6.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("7.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("8.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("9.jpg") >= 0){

antwoord = "SAAB Gripen";

}

if(image.indexOf("10.jpg") >= 0){

antwoord = "SAAB Gripen";

}

var control = document.getElementById("contr")

if (control.value == antwoord){

confirm("juist")

document.location.reload(true)

}

else

{

confirm("fout")

document.location.reload(true)

}

}

</script>

</head>

<body bgcolor="#999999">

<h1 align="center">Aircraft Recognition</h1>

<center>

<p><script language="JavaScript"><!--

var pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

var picture = pictures[Math.floor(Math.random() * pictures.length)];

// je had hier nog print picture staan

document.write('<img height="500" width="500" src="' + picture + '" id="image"/>');

// --></script><noscript><img src="4.jpg"/></noscript></p>

<form name="naam">

<input type="text" name="tekstregel" size="25" id="contr"/>

<input type="button" value="OK" onClick="test()"/>

</form>

</center>

</body>

</html>

met deze code staat de titel niet meer naast het plaatje.

en jij wou graag dat je de afbeelding op een bepaalde grote kon tonen,

dat is erg gemakkelijk.

height="500" width="500"

je hoeft alleen maar height, en width atributen toe te voegen aan je img tag.

Maar nu komt het eerste probleem al.

als je dit toevoegt zal dit voor elke afbeelding gelden.

Als je de afbeelding niet op ware grote laat tonen, moet je het relevant verkleinen.

dus als hij eerst 1000 bij 1000 was, moet je er nu 500 500 (0.5) van maken.

maar als je nu 1 afbeelding hebt van 1000 x 1200, en een afbeelding van 1000 x 10000

en je verkleint deze bijde naar 500 x 500, zal de eerste er (langerekt, verekt, uitgerekt) uitzien, omdat:

je height 0.5X hebt, maar width 0.4X hebt.

dus je moet er eigenlijk voor zorgen dat alle afbeeldingen even groot zijn, je kunt ze wel verkleinen maar dat moet je dan wel goed doen.

wat je wel met javascript zou kunnen doen is bijvoorbeeld elke foto 0.5X zo groot maken, maar ik weet niet of je hier naar opzoek bent, want dan worden ze wel kleiner maar dan hebben alle foto's nog steeds verschillende formaten.

aangepast door ecence
Link naar reactie
Delen op andere sites
cyclodries Groentje

cyclodries

Geplaatst:
  • Auteur
Geplaatst:

hm... nuttig!

dat de afbeeldingen verschillende formaten hebben maakt eigenlijk niet zoveel uit... ik had eerder de bedoeling om te limiteren... ze mogen bv kleiner zijn, maar niet 'wijder' dan 500px .... elke afbeelding die groter is dan 500px wordt dan gelimiteerd. (nu ik dit schrijf, begin ik eigenlijk al te twijfelen of dit wel mogelijk is! :-) )

Ik kan natuurlijk ook kieskeuriger zijn in het zoeken van mijn afbeeldingen, maar ik moet er zo'n 350 X 5 = 1750 hebben! (jaja... tis ne zware cursus! :D) en dan wil je al eens dat het rap gaat hé! ;)

kheb nu nog wel tijd tot januari hoor... dus ik kan er mijn tijd voor nemen! :)

grtz

Link naar reactie
Delen op andere sites
ecence Meewerkend lid

ecence

Geplaatst:
Geplaatst:

Nou, ik heb hier toch nog de code te pakken gekregen, als de afbeelding breeder is dan 500 px, wordt deze automatisch kleiner gemaakt.

<head>

<script>

function onload(){

var imgsrc = document.getElementById("image").src;

var img = new Image();

img.src = imgsrc;

var imgwidth = img.width;

if(imgwidth > 500){

document.getElementById("image").width=500;

}

}

</script>

</head>

<body onload="onload()">

het is belangrijk dat je de code in de head plaatst.

het is ook belangrijk dat je de begin body tag verandert in deze.

veel succes met het leren :top:

Link naar reactie
Delen op andere sites
cyclodries Groentje

cyclodries

Geplaatst:
  • Auteur
Geplaatst:

Ik zou zeggen... zoek snel ff 60 prentjes bij elkaar, noem ze 1 tot 60 en speel het spelletje ff mee!

;)

het werkt écht perfect!

ik heb snel nog even de 'reload-actie' weggenomen bij een fout antwoord. Zo kan men opnieuw proberen en uiteindelijk toch het juiste antwoord vinden... Eerst had ik bij "document.location.reload(true)" het woordje "true" vervangen door "false"... maar dit bleek een foute gok! ;) dan maar het hele zinnetje weggelaten en plots werd het helemaal wat ik wou! De limitering van grootte werkt ook perfect!

nog 1 vraagje om af te sluiten... zoals ik al zei gaat het hier om 350 X 5 prentjes... zou dat teveel kunnen worden om deze allemaal in het scriptje te passen?? zou dat op de één of andere manier kunnen 'overbelast' worden?

Hier volgt dus men uiteindelijke resultaat... (heb wel enkele herhalende lijnen weggelaten om ruimte te besparen hier)

.....

<!DOCTYPE html>

<html xmlns="XHTML namespace">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Aircraft Recognition</title>

<script type="text/javascript">

function test()

{

var image = document.getElementById("image").src;

var antwoord = "";

if(image.indexOf("1.jpg") >= 0){

antwoord = "f-16 fighting falcon"

}

if(image.indexOf("2.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("3.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("4.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("5.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("6.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("7.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("8.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("9.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("10.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("11.jpg") >= 0){

antwoord = "mirage f1"

}

...

}

if(image.indexOf("59.jpg") >= 0){

antwoord = "tornado";

}

if(image.indexOf("60.jpg") >= 0){

antwoord = "tornado";

}

var control = document.getElementById("contr")

if (control.value == antwoord){

confirm("juist")

document.location.reload(true)

}

else

{

confirm("fout")

}

}

</script>

<script>

function onload(){

var imgsrc = document.getElementById("image").src;

var img = new Image();

img.src = imgsrc;

var imgwidth = img.width;

if(imgwidth > 500){

document.getElementById("image").width=500;

}

}

</script>

</head>

<body onload="onload()" bgcolor="#999999">

<h1 align="center">Aircraft Recognition</h1>

<center>

<p><script language="JavaScript"><!--

var pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg', '23.jpg', '24.jpg', '25.jpg', '26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg', '31.jpg', '32.jpg', '33.jpg', '34.jpg', '35.jpg', '36.jpg', '37.jpg', '38.jpg', '39.jpg', '40.jpg', '41.jpg', '42.jpg', '43.jpg', '44.jpg', '45.jpg', '46.jpg', '47.jpg', '48.jpg', '49.jpg', '50.jpg', '51.jpg', '52.jpg', '53.jpg', '54.jpg', '55.jpg', '56.jpg', '57.jpg', '58.jpg', '59.jpg', '60.jpg'];

var picture = pictures[Math.floor(Math.random() * pictures.length)];

document.write('<img src="' + picture + '" id="image"/>');

// --></script><noscript><img src="4.jpg"/></noscript></p>

<form name="naam">

<input type="text" name="tekstregel" size="25" id="contr"/>

<input type="button" value="OK" onClick="test()"/>

</form>

</center>

</body>

</html>

Link naar reactie
Delen op andere sites
ecence Meewerkend lid

ecence

Geplaatst:
Geplaatst:

jij vraagt of het overbelast kan worden, Ik weet niet hoe je er op komt maar dat is een uitstekende vraag!

Nee, met deze array kan de server waarschijnlijk niet overbelast worden, en ik denk haast wel dat hij wel 1750(5x350) aan kan. als je multidimensionale array's gaat maken kom je sneller in de buurt, als je niet weet wat dit is kun je het vergeten.

En voordat je afsluit geef je nog een link?

Link naar reactie
Delen op andere sites
ecence Meewerkend lid

ecence

Geplaatst:
Geplaatst:

Echt nicé dat je zo weinig code zo behulpzaam hebt gemaakt,

Dikgedrukte gedeelte bevat code die tekst lowercase maakt, dus F16 of f16 maakt niets meer uit.

<!DOCTYPE html>

<html xmlns="XHTML namespace">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Aircraft Recognition</title>

<script type="text/javascript">

function test()

{

var image = document.getElementById("image").src;

var antwoord = "";

if(image.indexOf("1.jpg") >= 0){

antwoord = "f-16 fighting falcon"

}

if(image.indexOf("2.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("3.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("4.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("5.jpg") >= 0){

antwoord = "f-16 fighting falcon";

}

if(image.indexOf("6.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("7.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("8.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("9.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("10.jpg") >= 0){

antwoord = "jas 39 gripen";

}

if(image.indexOf("11.jpg") >= 0){

antwoord = "mirage f1"

}

...

}

if(image.indexOf("59.jpg") >= 0){

antwoord = "tornado";

}

if(image.indexOf("60.jpg") >= 0){

antwoord = "tornado";

}

var control = document.getElementById("contr");

control.value = control.value.toLowerCase();

if (control.value == antwoord){

confirm("juist")

document.location.reload(true)

}

else

{

confirm("fout")

}

}

</script>

<script>

function onload(){

var imgsrc = document.getElementById("image").src;

var img = new Image();

img.src = imgsrc;

var imgwidth = img.width;

if(imgwidth > 500){

document.getElementById("image").width=500;

}

}

</script>

</head>

<body onload="onload()" bgcolor="#999999">

<h1 align="center">Aircraft Recognition</h1>

<center>

<p><script language="JavaScript"><!--

var pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg', '23.jpg', '24.jpg', '25.jpg', '26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg', '31.jpg', '32.jpg', '33.jpg', '34.jpg', '35.jpg', '36.jpg', '37.jpg', '38.jpg', '39.jpg', '40.jpg', '41.jpg', '42.jpg', '43.jpg', '44.jpg', '45.jpg', '46.jpg', '47.jpg', '48.jpg', '49.jpg', '50.jpg', '51.jpg', '52.jpg', '53.jpg', '54.jpg', '55.jpg', '56.jpg', '57.jpg', '58.jpg', '59.jpg', '60.jpg'];

var picture = pictures[Math.floor(Math.random() * pictures.length)];

document.write('<img src="' + picture + '" id="image"/>');

// --></script><noscript><img src="4.jpg"/></noscript></p>

<form name="naam">

<input type="text" name="tekstregel" size="25" id="contr"/>

<input type="button" value="OK" onClick="test()"/>

</form>

</center>

</body>

</html>

Link naar reactie
Delen op andere sites
Gast
Dit topic is nu gesloten voor nieuwe reacties.
 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.