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.

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?

@knge: hur menar du exakt?

@Dunder:

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.

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

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

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!

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.

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.

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å

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.

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

@anon14781: 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?