[ Hype.se - Forum - Lall

Inlägg: 1270

Hej hej!

Jag har tagit på mig att göra en sak, men mina kodningskunskaper sträcker sig som längst till HTML/CSS varpå jag försökt konsultera de Internets - hittills med mindre lycka. Hype.se är ju en grogrund för talanger inom allt möjligt så varför inte prova här, trots att det är en spelsite?

Jag kan börja med att nämna att det enbart ska köras lokalt på min dator och ingenting behöver prata med en server etc.

Vad jag behöver är ett Javascript som visar olika bilder i HTML-dokumentet beroende på vilket namn som står i en form/textfält. Dvs utan att behöva submit'a det som står i form'en. Jag tänker mig att det mer eller mindre är exakt samma funktion som t.ex. prisjakt.nu använder med skillnaden att prisjakt.nu visar mer än bara en bild samt att jag inte behöver någon sökfunktion. Jag kommer ju själv "definiera" i själva skriptet a la;

"If 'stockholm' in form name='enda input-text-fältet på sidan' show image name='bild_2'
If else 'oslo' in form name='enda input-text-fältet på sidan' show image name='bild_3'
If else 'helsinki' in form name='enda input-text-fältet på sidan' show image name='bild_4'
etc etc..."

Det bästa vore om man kunde byta bild beroende på vad som finns i textfältet just då, och om användaren sedan väljer att trycka enter eller motsvarande - i.e. submit'ar fältets innehåll - så öppnas en ny sida.

Jag har försökt kika på prisjakt.nu:s källa men jag fattar inte vilken del av deras enorma skript som är vad jag letar efter.

Finns det någon här på hype.se som skulle kunna hjälpa mig med vad det är jag letar efter? Tutorials, nyckelord på funktionen/er etc? Rent spontant känns det inte som att det kan vara ett invecklat skript bara jag lyckas identifiera vad prisjakts-funktionen heter och hur den fungerar. Eller har jag tagit vatten över huvudet? Eller borde jag säga kaffe över huvudet?! Hah!

All hjälp uppskattas stort! Mvh / Amba

2010-04-22 kl 14:37

Lictor [Hype.se] Inlägg: 2952	Det du försöker beskriva är AJAX och är det nya svarta på webben sedan ett tag tillbaka. Googla lite kring det nyckelordet borde du hitta nånstans att börja.
	It is Microsoft, and I will kill them 2010-04-22 kl 17:58

WinHo

Inlägg: 165

Det här är jag en fena på!

OM du mot all förmodan vill göra detta ännu enklare än Ajax kan du lägga in ett "onkeyup" på formulärfältet, det betyder att den gör det du definerar i den funktionen du anropar varje gång du släpper upp en tangent (skriver en bokstav tex). Sen kan du anropa en funktion som byter sökväg till en bild baserat på vad som står i formulärfäletet.

Mycket simpelt sätt att skapa det på.

----

OM du vill göra det lite roligare förslår jag precis som Lictor att du kör med Ajax!

Ajax fungerar enkelt förklarat genom att anropa en sida på servern med olika parametrar för att visa/göra olika saker. Detta visas sen i klienten utan att göra en omladdning eller liknande. Mycket trevligt. Jag använder det själv på många av de sidor jag gjort.

Det absolut lättaste sättet att börja på är att kolla på prototype, det är ett ramverk för javascript där Ajax finns implementerat som en färdig funktion. Det är superlätt att dra in och använda.

Här är även en bra sida för lite ajaxprylar: http://www.ajaxdaddy.com/

2010-04-23 kl 11:06

WinHo Inlägg: 165	Efter att ha läst lite mer noga vad du är ute efter skulle jag vilja påstå att Ajax är overkill. Det räcker gott med lite vanligt Javascript som i min översta del
	2010-04-23 kl 14:59

Ambassador Inlägg: 1270	Hej hej! Tack WinHo och Lictor för de snabba svaren! Jag uppskattar det! Okej WinHo, jag tackar för inputen! Jag kommer bara använda det här lokalt så egentligen behöver jag inte ordna, som jag förstår det, något som pratar med en server. Tack! Mvh / Amba
	2010-04-23 kl 17:58

Fragge Inlägg: 3218	Gud vilket trevligt litet community vi är!
	Sorry, I can't hear you over the sound of how awesome I am. 2010-04-26 kl 21:19

Ambassador Inlägg: 1270	Ja!
	2010-04-27 kl 14:33

Geting Inlägg: 1681	Fragge skrev:Gud vilket trevligt litet community vi är! tala för dig själv
	rakt in i kaklet 2010-04-27 kl 16:31

Fragge Inlägg: 3218	Geting skrev:Fragge skrev:Gud vilket trevligt litet community vi är! tala för dig själv Du är ju trevligast av alla, innerst inne.
	Sorry, I can't hear you over the sound of how awesome I am. 2010-04-27 kl 17:48

Ambassador Inlägg: 1270	Hej igen! Jag fixade det med onkeyup och det fungerar ju perfekt! Men jag behöver lite hjälp med att den ska öppna en ny sida (i samma fönster, alltså inte ett nytt fönster) när man submit'ar med enterknappen. Någon som kan lista ut vad jag gör för fel? Edit: Scratch that! Det fungerade genast om jag la till "return false;" på en rad under! Mvh / Amba
	2010-05-03 kl 15:37

WinHo Inlägg: 165	Trevligt! Gratulerar :D
	2010-05-03 kl 21:44

Ambassador

Inlägg: 1270

Tackar tackar!

Okej. Nästa grej nu. Om det går skulle jag vilja göra en grej som mäter tiden det tar från att en kort text visas till att användaren klickar på rätt del av en bild (av flera möjliga delar, ska använda image maps tänkte jag). Allra helst ska det gå att spara denna information (20x, alltså 20 ord ska visas och tiden det tog för varje ord ska helst kunnas sparas på något sätt, men jag kan ju ta screenshot också).

Vilka delar behöver jag? Alltså vilka beståndsdelar måste jag läsa upp på? Om någon vill namedroppa lite kort skulle jag verkligen uppskatta det!

2010-05-15 kl 20:33

WinHo

Inlägg: 165

Att mäta tiden är busenkelt då det finns massor av färdiga script för det. Lite meck att beskriva alla steg om du vill koda själv men om du googlar typ "javascript stopwatch" eller liknande så kommer du få massor av script med den funktionaliteten som du sen kan enkelt modifiera. Det bygger på att man använder javascripts inbyggda "time-objekt". Sen behöver du ju bara lägga start och stop på den funktion som visar texten. Eller hur det nu är tänkt

När det gäller att spara resultatet är det lite värre. I javascript har du ju ingen åtkomst till datorn, utan endast klienten. Så du kan tex inte spara en textfil eller likande, det skulle vara en riktig säkerhetsmiss.

Dock skulle du tex kunna ta alla resultat och lägga dem i en textarea eller likande, och sedan antingen maila det till dig själv med ett fomulär, eller som du skrev skärmdumpa det.

2010-05-16 kl 10:10

Ambassador Inlägg: 1270	Ah, perfa! Stort tack WinHo!!
	2010-05-16 kl 11:51

Ambassador

Inlägg: 1270

Hej hej i sena natten! Har suttit och försökt fått till det här sedan 1600 men det är nu uppenbart att jag saknar kunskapen för att ro hem även en till synes enklare grej som detta.

Vad jag vill åstadkomma är följande;

Att min sida ska ha en knapp som startar ett test.

Testet går ut på att ett namn visas i en div, användaren ska då klicka på motsvarande bild (beroende på namnet som står i tidigare nämnda div, egentligen är det image maps jag tänkte använda med koordinater). När rätt bild har klickats så plockar den ut tiden det tog för användaren att "klicka rätt" och lägger till det efter texten som finns i en id="outputdiv" som finns längre ned på sidan. (Detta så att den inte skriver över vad som skrivits av tidigare test.)

Testet ska beta av en lista på 20 namn.

Första är ju inte så svårt, bara att anropa en javascriptfunktion med en länk.

Att visa en viss text stegat utefter en Array kan väl inte egentligen vara så jättesvårt men jag bommar stort på hela den här Array-grejen i praktiken! Argh!! Jag fattar inte hur man "sparkar igång" en Array och hur man får det hela att stega fram ett namn "en efter en".

Jag tänker mig iaf att den ska notera tiden det tog för användaren att hitta rätt bild beroende på ord a la "if namnpåbildsomklickats == namnpåtextsomvisas } notera starttid minus getTime och getElementById("divattfotograferasmedprintscreen").write (eller vad nu sista biten blir som inte byter ut hela divens innehåll som firstChild.data verkar göra).

Det här är vad jag lyckats åstadkomma hittills, t.o.m. jag kan se att det finns logiska luckor men jag fattar inte hur jag ska lappa ihop detta;

var usstate = ["alabama, alaska, arkansas"];
var starttime = new Date.getTime();

function starttest()
   {
   document.getElementbyId("showstatenametolocatediv").firstChild.data = usstate;
   }

function statetest()
   {
   if (statenamelink == usstate);
      {
      var statetime = (new Date).getTime() - starttime;
      document.getElementById("showstatestimediv").write = statetime;
      usstate++;
      }
   }

All hjälp här uppskattas verkligen!! Nu blöder ögonen och jag måste verkligen gå och lägga mig!

Ha det bra alla! Mvh / Amba

2010-05-18 kl 03:16

Ambassador

Inlägg: 1270

Ok det här är vad jag har nu;

var usstate = ["alabama", "alaska", "arkansas"];
var i=0;
var starttime = new Date().getTime();

function statetest(statenamelink)
   {
   var state = usstate[i];
   alert("inne i StateTest");
   alert(usstate[i]);
   if (statenamelink == usstate[i])
      {

      var statetime = (new Date).getTime() - starttime;
      alert("rätt stat");
      alert(statetime);
      alert(i);

      document.getElementById("showstatestimediv").write = statetime
      i++;

      starttime = new Date().getTime();

      }

      else
       alert("fel stat");

   }

men jag är lite lur på hur bra det fungerar med tidtagningen. Är det rätt tänkt att lägga den som den ligger nu? Well.. jag ska fortsätta haxxa.. Mvh / Amba

2010-05-18 kl 14:55

WinHo

Inlägg: 165

Spännade

Jag hade nog löst det med 2 funktioner. En som startar och väljer stat, och en som kollar om det är rätt:

--------------------------------------------------------------------------------------------

var usstate = ["alabama", "alaska", "arkansas"];
var startTime = new Date().getTime();
var endTime = new Date().getTime();

var i = 0;

function selectState(arrPos)
{
   //För att gå vidare till nästa stat
document.getElementById("divStateName").innerHTML = usstate[arrPos];
   starTime = new Date().getTime();
}

function checkState(arrPos)
{

   //Hämta texten i diven som visar statnamnet
   var stateName = document.getElementById("divStateName").innerHTML;

   //Kollar om det matchar med texten i arrayen, i sånt fall gå vidare. Om annars inte.
   if(stateName == usstate[arrPos])
   {
      i++;
      endTime = new Date().getTime();
      document.getElementById("divOutput").innerHTML += "" + (endTime - startTime);
      if(i < usstate.length); //Så att den slutar när det är slut på stater
      {
      selectState(i);
      }
      alert("rätt stat");
   }
   else
   {
      alert("fel stat");
   }
}
-------------

Sen sätter du på startknappen onclick="selectState(0)"
Och på respektive bild onclick="checkState(siffranförrättstatiarrayen)"

Sen kan du ju småpilla runt för att få det att fungera som du tänkt. Hur du vill visa tiden och sånt, men det är ju bara formatering

2010-05-18 kl 17:04

WinHo Inlägg: 165	Och jag reserverar mig för eventuella stavfel i koden
	2010-05-18 kl 17:05

Ambassador Inlägg: 1270	Men du! KUNG!! Ska genast prova!! Stort tack WinHo!!
	2010-05-18 kl 17:56

Ambassador

Inlägg: 1270

Ah! Det fungerar mycket bra! Supernice!! Tack!

Men.. (hehe) finns det något lätt sätt att ha kvar länkarna på bilderna så de alltid är detsamma och fungerar oberoende av ordningen på namnen (staterna) i arrayen? Jag kommer göra olika randomized listor med (samma) namn (alltså men i olika ordning) som ska gås igenom och som jag förstår det kommer jag alltså som det ser ut just nu i så fall ändra detta på två ställen. (Det slår mig nu att jag nog glömde nämna det, sorry!!)

2010-05-18 kl 18:37