Forumdelen sponsras av

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

JS quiz med countdown timer

Hej!

Har i uppgift i skolan att göra ett quiz i JS där jag ska skapa en kundansökan där användaren kans vara på specifika frågeställningar, användaren måste göra detta under en viss tid, alltså har på sig 20 sekunder på varje fråga. Om användaren ger rätt svar så går man vidare till nästa fråga och har man fel eller tiden hinner rinna ut så är frågesporten över. Man ska kunna skriva in sitt smeknamn som han/hon vill ha i frågespelet. När man väl har svarat fel eller tiden har runnit ut så är spelet över men då ska man kunna starta om spelet igen från start. Om nu användaren skulle lyckas svara rätt på alla frågor så ska spelet registrera användarens totala tid och man ska presentera detta i en poänglista med de fem snabbaste tiderna. The high-score will be saved in the browsers Web Storage.

(function() {
var questions = [{
question: "Vilket fotbollslag spelar i Norra london",
choices: ['Arsenal', 'Chelsea' ,'Manchester United', 'West ham', 'Burnley'],
correctAnswer: 0
}, {
question: "Vilket fotbollslag spelar i Norra london",
choices: ['Arsenal', 'Chelsea' ,'Manchester United', 'West ham', 'Burnley'],
correctAnswer: 0
}, {
question: "Vilket fotbollslag spelar i Norra london",
choices: ['Arsenal', 'Chelsea' ,'Manchester United', 'West ham', 'Burnley'],
correctAnswer: 0
}, {
question: "Vilket fotbollslag spelar i Norra london",
choices: ['Arsenal', 'Chelsea' ,'Manchester United', 'West ham', 'Burnley'],
correctAnswer: 0
}, {
question: "Vilket fotbollslag spelar i Norra london",
choices: ['Arsenal', 'Chelsea' ,'Manchester United', 'West ham', 'Burnley'],
correctAnswer: 0
}];

Frågorna är detsamma jag vet, ska ändra det senare.

Men det är detta jag har hunnit få ut och vet inte hur jag ska kunna lägga till en countdown timer på 20 sekunder på varje fråga så en fråga visas i taget och så att använadren kan skriva in sitt "smeknamn" och sen att lyckas inte användaren fixa en fråga så förlorar man och så ska det finnas en knapp där man kan starta om.

Skulle uppskatta all hjälp till detta. Är nybörjare inom JS.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
På snedden i Dirty South
Registrerad
Dec 2001

Swec har som policy att i princip inte alls hjälpa till med skoluppgifter.
Du kan få svar på dina frågor genom Google och speciellt genom https://www.w3schools.com/

Jag rear ut min själ, allt ska bort - Fractal Design Define R3 | Corsair H100i GTX & 2 x Noctua NF-F12 PWM | XFX DD R9 280 3GB & Sapphire Dual-X R9 280X 3GB OC | NETGEAR ReadyNAS RN204 2x8 + 2x6 TB RAID5 & Synology DS216se 3 TB JBOD & DS216j 2x8 TB RAID 0 | AOC E2460 + BenQ XL2411T + AOC E2461FWH + AOC E2476VWM6 | Razer Blackwidow Chroma X Green + Logitech G502 | ASUS FX502VM-DM265T/GL502-VMZ + 24 GB RAM + Samsung 960 EVO 500 GB + Hynix whatever SSD 256 GB

Trädvy Permalänk
Avstängd
Registrerad
Jul 2017

Du får nog fråga lite mer specifikt om saker du har problem med. Inte en hel uppgift.

Du får köra igång någon timer, öka på ett index, hämta ut frågan för det indexet och sedan kolla svaret och räkna upp felaktiga svar och korrekta svar.

Om du söker lite på setTimeout, setInterval, clearTimeout, clearInterval, localStorage, sessionStorage så kan du nog få ihop det.

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

Ber om ursäkt visste inte detta.

var timeleft = 20; var downloadTimer = setInterval(function(){ timeleft--; document.getElementById("countdowntimer").textContent = timeleft; if(timeleft <= 0) clearInterval(downloadTimer); },1000);

Där har jag min countdown kod, men den räknar bara ner från 20 till 0 men svarar man på en fråga så börjar den inte om på 20 utan den fortsätter räkna ner från t.ex 15 om det var då man klickade på första svaret.

Hur löser man detta så den börjar om på 20 när man svarat på första frågan?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Avstängd
Registrerad
Jul 2017

Är det inte bara sätta timeleft = 20 om timeleft <= 0 eller direkt när de svarat

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@knge: hur menar du exakt?

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Bästkusten
Registrerad
Jun 2009
Skrivet av Howardtheory:

@knge: hur menar du exakt?

Du har en if-sats:

if(timeleft <= 0)

där man kanske bör "starta om" på 20 sekunder. Likadant bör du börja om på 20 när ett svar har getts.

Sen bör du även använda code-taggarna i forumet så koden ser bättre ut:
[code]
Här skriver du koden
[/code]

|| Intel 8700K || MSI GTX 1080 TI Gaming X || Xonar DG || Samsung 750 EVO 500GB & OCZ Agility 3 120GB & Samsung 960 EVO 250GB & Crucial V4 256GB || XFX XXX 650W || Antec P183 || Asus G-Sync RoG Swift PG279Q || Dell XPS 15 || Thinkpad X220

The Force is like Duct Tape, it has a light side, a dark side, and holds the universe together.

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@DunderKlumpen:

Tanken är att om man inte hunnit svara på 20 sekunder att tiden har hunnit rinna ut så har man förlorat och så ska det finnas en starta om knapp så man börjar om på fråga 1 igen. Men jag vill få in så att klarar man fråga 1 så kommer man till fråga två så ska det börjas om på 20 sekunder och klarar man fråga två på t.ex när det är 8 sekunder kvar så börjas det om på 20 sekunder på fråga tre igen.

Det är det jag vill ha hjälp med och får inte riktigt till liksom.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Aug 2004
Skrivet av ZaInT:

Swec har som policy att i princip inte alls hjälpa till med skoluppgifter.

Bullshit...

Senast redigerad av Loxus, 2004-08-02 klockan 13:13

Trädvy Permalänk
Medlem
Registrerad
Jun 2004

Du behöver inte ha en egen tidsräknare om du använder setInterval eller setTimeout den tar som parameter ett tal i millisekunder. Den håller koll om tiden är slut eller inte.

Bättre än din.

Trädvy Permalänk
Medlem
Registrerad
Okt 2002
Skrivet av Howardtheory:

@DunderKlumpen:

Tanken är att om man inte hunnit svara på 20 sekunder att tiden har hunnit rinna ut så har man förlorat och så ska det finnas en starta om knapp så man börjar om på fråga 1 igen. Men jag vill få in så att klarar man fråga 1 så kommer man till fråga två så ska det börjas om på 20 sekunder och klarar man fråga två på t.ex när det är 8 sekunder kvar så börjas det om på 20 sekunder på fråga tre igen.

Det är det jag vill ha hjälp med och får inte riktigt till liksom.

Posta all kod du skrivit så blir det lättare att hjälpa till.
Tror ingen vill ge dig en färdig lösning

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

js, quiz/countdown

Hej!

Jag har ett litet problem här.

https://jsfiddle.net/jwaqwrrt/70/

där är koden som finns.

har två problem.

Första:
Det är så att jag har skapat en countdown och en alert när den kommer ner till 0 som säger den du har förlorat! men det är så att jag vill fixa så att det börjar räknas ner när man väl har skrivit in sitt nickname och klickat på knappen välj, då ska nedräkningen börja. Nu räknar den ner direkt så fort man kommer in på sidan.

andra:
Det andra är att, svarar man fel på en fråga eller tiden rinner ut så ska alert komma upp där det står du har fölorat som jag har fixat i countdown knappen, men vill ha det så även när dom svarar fel. Och då ska man kunna starta om spelet från fråga 1 igen.

Hade uppskattat all hjälp med detta om hur man löser dessa två problem

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

var name = ''; // Empty string var input = document.getElementById('nameInput'); var nameBtn = document.getElementById('nameButton'); var txt = document.querySelector('p'); nameBtn.addEventListener('click', updateBtn); function updateBtn () { name = input.value document.getElementById("displayedName").innerHTML = name input.value = '' // clear input field }

Jag tror man måste sätta min första globala Interval i function updateBtn function? Kan det stämma?

Nu hittar jag dock inte min första globala Interval i all min kod. Hade uppskattat om någon kan hjälpa mig, då jag är rätt ny med JS

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

Om du flyttar tilldelningen som sker på rad 14 ner in i knapp-metoden, ca rad 32, så borde #1 lösas.

Quiz-objektet är designad att ge poäng för rätt svar och inga poäng för fel svar, oavsett vad så tuggar den igenom alla frågor. Hur vill du att den ska fungera? Vid första felaktigt svar så börjar den om från början?

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Registrerad
Okt 2015
Skrivet av Leedow:

Om du flyttar tilldelningen som sker på rad 14 ner in i knapp-metoden, ca rad 32, så borde #1 lösas.

Quiz-objektet är designad att ge poäng för rätt svar och inga poäng för fel svar, oavsett vad så tuggar den igenom alla frågor. Hur vill du att den ska fungera? Vid första felaktigt svar så börjar den om från början?

Hej tack för svar!

Har sedan tidigare testat att sätta in

var downloadTimer = setInterval(intervalTick,1000);

ner till

function updateBtn () { name = input.value document.getElementById("displayedName").innerHTML = name input.value = '' // clear input field }

Men det fungerar inte, den tickar fortfarande ner innan jag ens hinner skriva in nickname och klicka på knappen välj då jag vill att kl ska starta.

Ja exakt så, vid första felaktiga svar så ska den börja om, har du haft rätt på de två första och fel på tredje så får du börja om quizen samt om tiden hinner rinna ut på en fråga så får du börja om med.

Hade uppskattat all hjälp verkligen

Ha det bra!

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Skrivet av Howardtheory:

Men det fungerar inte, den tickar fortfarande ner innan jag ens hinner skriva in nickname och klicka på knappen välj då jag vill att kl ska starta.

Definiera downloadTimer och gör tilldelningen i metoden:
https://jsfiddle.net/tpeqLjae/

14 och 35 är förändrad kod

Skrivet av Howardtheory:

Ja exakt så, vid första felaktiga svar så ska den börja om, har du haft rätt på de två första och fel på tredje så får du börja om quizen samt om tiden hinner rinna ut på en fråga så får du börja om med.

Gör en else-sats i guess()-metoden som nollställer score och börjar om på första frågan (Har även lösningen för #1 med sig)
https://jsfiddle.net/eku5d08e/

56-62 är ny kod

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Forumledare
Kent
Registrerad
Jan 2005

@Howardtheory *Trådar sammanfogade i enlighet med §3.3 i forumreglerna*

Observera att vi inte tillåter korspostning (flera trådar om samma ämne). Detta då vi tycker det är viktigt att alla får samma chans att få sina trådar uppmärksammade.

Synpunkter gällande modereringen? Då kan du kontakta mig, moderatorerna, Sweclockers
Ursäkta min stavning, jag är dansk

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

sorry!

Jag behöver lite hjälp, sitter fast i huvudet nu.

https://jsfiddle.net/g61rg0od/45/

så ser koden o sidan ut, jag vill man inte ska kunna trycka på något av svaren förens man har skrivit in sitt nickname och klickat på välj, har för mig att det är en if sats som ska typ in under let button kanske? Vill att en alert ska komma upp som säger, "du måste skriva in nickname innan du kan starta quizen"

Är rätt ny inom JS med så ni vet. Hade uppskattat all hjälp där.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

skapa ul/li lista i function JS

Hej! jag har denna kod

function showScores() {
let gameOverHtml = "<h1>Resultat</h1>";
gameOverHtml += "<h2 id='score'>Ditt resultat: " + quiz.score + "</h2>";
let element = document.getElementById("quiz");
element.innerHTML = gameOverHtml;
}

Som dyker upp efter man svarat rätt på alla 5 frågor i quizen, då kommer det fram ditt resultat: 5 blir det.

Hur bygger man vidare så man kan bygga en ul/li lista på de topp 5 snabbaste svaren? Då jag gjort så att man har max 20 sekunder på sig att svara på varje fråga.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Skrivet av Howardtheory:

Hej! jag har denna kod

function showScores() {
let gameOverHtml = "<h1>Resultat</h1>";
gameOverHtml += "<h2 id='score'>Ditt resultat: " + quiz.score + "</h2>";
let element = document.getElementById("quiz");
element.innerHTML = gameOverHtml;
}

Som dyker upp efter man svarat rätt på alla 5 frågor i quizen, då kommer det fram ditt resultat: 5 blir det.

Hur bygger man vidare så man kan bygga en ul/li lista på de topp 5 snabbaste svaren? Då jag gjort så att man har max 20 sekunder på sig att svara på varje fråga.

Iterera arrayen med svaren och bygg på med html-kod till din gameOverHtml-variabel.

Exempel:

gameOverHtml += "<ul>"; //Starttagg för lista for(var i = 0; i < scores.length;i++) { gameOverHtml += "<li>"+scores[i]+"</li>"; //Varje enskild rad i listan } gameOverHtml += "</ul>"; //Sluttagg för lista

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

Får inte till det riktigt asså.

function showScores() { let gameOverHtml = "<h1>Resultat</h1>"; gameOverHtml += "<h2 id='score'>Ditt resultat: " + quiz.score + "</h2>"; document.getElementsByClassName("grid").innerHTML var HTML = "<table border=1><tr>"; for(j=1;j <=10; j++) { HTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; } HTML += "</tr></table>"; let hmhm = document.getElementById("quiz") hmhm.innerHTML = HTML; let element = document.getElementById("quiz"); element.innerHTML = gameOverHtml; }

Vad gör jag för fel? Vill ha en tabell där jag sparar information om användarnas tid i en topp 5 lista, då dom har 20 sekunder på sig att svara på varje fråga, och vill spara detta i webstorage, men har ingen aning om hur man gör.

https://jsfiddle.net/7r2npqe0/89/

där är hela sidan annars om ni vill se. Behöver all hjälp jag kan få

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

js lista med webstorage

Hej!

https://jsfiddle.net/ksL398xg/51/

där är sidan om hur allt ser ut

och det jag har kvar i uppgiften är att skapa en lista och spara det med webstorage i en topp 5 lista.

function showScores() { let gameOverHtml = "<h1>Resultat</h1>"; gameOverHtml += "<p>" + name + " klarade quizet på " + totaltime + " sekunder.</p>"; let element = document.getElementById("quiz"); element.innerHTML = gameOverHtml; }

Där är koden som jag har gjort, har skapat så namnet kommer fram och den totala tiden, nu är det bara att skapa en topp 5 lista som sparas i webstorage, vilket jag har zeeerrroo koll på och hoppas att någon kan hjälpa mig med detta. Ni har länken längst upp om hur allt i koden ser ut.

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

Web storage kan vara localStorage eller sessionStorage. sessionStorage rensas när webbläsaren stängs medans localStorage finns kvar även när webbläsaren stängs.

Du lär väl ha ett formulär där du matar in en ny rad i listan och där spara antingen till sessionStorage eller localStorage.

Jag hade gjort det så här.

Mata in värdet i listan via ett formulär och spara det i en array som ett json objekt. Sedan skulle jag göra om hela arrayen till en JSON sträng med JSON.stringify() och sedan hämta läsa tillbaka med JSON.parse() när du ska loopa ut det på skärmen.

Läs mer om Web storage (sessionStorage och localStorage) här
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_...

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

Slängde ihop ett fungerande exempel. https://jsfiddle.net/0h99q5Lw/1/

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

En variant med sortering med snabbast tid först. https://jsfiddle.net/0h99q5Lw/2/

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

En list är en lista och en tabell är en tabell. Min kod skapade en ul/li (lista) och din kod skapar en tabell. Inget fel med det men det är bara presentation. Det andra du nämner är något helt annat.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

Mitt bidrag till lösning: https://jsfiddle.net/xu2myvuh/

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

Här är en lösning där du sätter hur många du vill visa från resultatlistan.
Sätt variabeln top till hur många som ska visas. Listan sorteras efter bästa till sämsta resultat.

https://jsfiddle.net/xu2myvuh/2/

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

RESTful api, hjälp quiz

Hej!

är nybörjare inom detta och har skapat ett quiz med html, css och js kod. Jag skapade frågor och svar, (detta är en uppgift i skolan) men såg sedan efter att det var inte så man skulle göra, man ska alltså hämta hem frågor via RESTful api och svara på dom, nu har jag gjort det på flera och det ser ungefär ut så här.

{ "id": 1, "question": "What is 1+1?", "nextURL": "http://v****.se:20080/answer/1", "message": "You got your question! Now send me the answer via HTTP POST to the nextURL in JSON-format" }

jag svarade

{ "answer" : 2 }

och fick fram

{ "message": "Correct answer!", "nextURL": "http://v*****.se:20080/question/21" }

Är detta rätt gjort? Och jag fortsatte att göra så här på varje ny "nextURL" som dök upp.

Men hur ropar jag nu till mig dessa frågor och svar till mitt quiz?

quizet ser ut så här

https://jsfiddle.net/ksL398xg/40/ (glöm svaren och frågorna) gjorde egna vilket var fel som jag beskrev

Big Bang Theory
Howard Wolowitz

Trädvy Permalänk
Medlem
Registrerad
Okt 2015

@RiviMaggot: tack så mycket för svaret!

Hur gör jag dock så jag får in de "nickname" som dom skriver in istället för
{ name: 'Kalle', time: 29 },
{ name: 'Ulf', time: 46 },
{ name: 'Frej', time: 34 },
{ name: 'Einar', time: 12 },
{ name: 'Pelle', time: 23 }

som finns inne i funktionen nu? och så det sparas med webstorage, typ local?

Big Bang Theory
Howard Wolowitz