JS quiz med countdown timer

@anon14781: tack för svaret och hjälpen. Jag tänkte bara hur får man in det i min funktion showcase på bästa sett?

https://jsfiddle.net/ksL398xg/40/

har försökt, men misslyckats.

innan quizen startar så jag ett nickname man måste skriva in och en funktion där tiden räknar hur snabbt man svarar på de totala frågorna, som dyker upp i funktionen showcase, men hur får man inte localstorage och topp 5 listan med den koden du skrev på bästa sett?

Det ska liksom läggas till automatiskt, vilket det gör nu men inte i en lista och det sparas inte i https://jsfiddle.net/ksL398xg/40/ just nu.

tjenare. det är så att jag har en skoluppgift med att göra ett quiz och hämta en fråga ur api och sedan svaret.

jag försöker hämta frågan nu med denna kod.

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  console.log(jsonQ)
}

// exports.
module.exports = myQuiz

denna kod har jag i network.js

Sedan i app.js så kör jag let Quiz = require('./network')

console.log(Quiz)

med denna kod försöker jag hämta ut frågan ur länken i myQ för att se så det fungerar. Men när jag går in i min localhost://4000 efter jag kört npm start. Så går jag in på webbsidan, högerklickar, väljer inspektera och sedan kollar i consolen, för att se om frågan som finns i länken dyker fram, för gör den det så antar jag att detta fungerar, men när jag kör detta nu och kollar i consolen i webbläsaren så visas endast

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  console.log(jsonQ)
}

// exports.
module.exports = myQuiz

vad gör jag för fel? Hur hämtar jag frågan ur länken? gör jag inte rätt?

@L'ombra:

okok tack. Hur löser man detta? har försökt men inte fått till det, är ny inom detta så du vet med.

Quiz.myquiz() eller något?

Tack för svar.
Har detta i app.js

let Quiz = require('./network')

console.log(Quiz)

och detta i network.js

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  return jsonQ
}

// exports.
module.exports = myQuiz

Efter jag testat detta och kollar sedan i consolen i webbläasren då kommer detta meddelande fram nedanför här.

async ƒ myQuiz() {
let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
let jsonQ = await myQ.json()
return jsonQ
}

kör på detta i app.js nu

let getQuiz = require('./network')
getQuiz()

och detta i network.js

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  console.log(jsonQ)
}

// exports.
module.exports = {
  myQuiz
}

funkade innan, men nu när jag satte {} mellan myquiz i module.exports så fungerar det ej, hur kommer det sig?

@Sonywalk:

tacksam för svar!

detta ligger i min app.js

const getQuiz = require('./network')
console.log(getQuiz())

och detta i min network.js

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  console.log(jsonQ)
}

// exports.
module.exports = {
  myQuiz
}

dock får jag detta meddelande
Uncaught TypeError: getQuiz is not a function
at eval (app.js?3330:2)
at Object.<anonymous> (build.js:250)
at __webpack_require__ (build.js:20)
at Object.<anonymous> (build.js:83)
at __webpack_require__ (build.js:20)
at build.js:63
at build.js:66

i röd text.

tar jag bort {} runt om myQuiz i module.exports så fungerar det, men så fort jag har dom {} så verkar det inte fungera, även om jag kör med console.log(Quiz.myQuiz()).

Functionen i network.js heter myQuiz

och i app.js getQuiz.

Kan det vara då console.log(myQuiz.getQuiz())? har provat det med men verkar inte fungera.

Hej!

Jag behöver lite hjälp här, är ny på detta och suttit fast ett tag nu.

i app.js har jag

const getQuiz = require('./network')
console.log(getQuiz())

och i min network.js har jag

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  console.log(jsonQ)
}

// exports.
module.exports = {
  myQuiz
}

och jag har en <div id ="questions"></div> i min index.html

som jag tänk att jag vill hämta ur första frågan ur så den skrivs ut där.

Men vet inte hur man gör riktigt, hade uppskattat om någon kan hjälpa mig med att visa lite kod.

Har försökt med skapa en variabel kört document.queryselecter('#questions')

men får inte till det riktigt så frågan hämtas ur vhost.lnu sidan till min div tag. hade uppskattat all hjälp

tjenare.

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  let text = jsonQ.question
  return text
}
let question = myQuiz()

console.log(question)

let qDiv = document.querySelector('#questions')
let quest = document.createElement('p')
quest.innerHTML = question
qDiv.appendChild(quest)

jag kör nu hela denna kod och funktion i app.js istället.

har fått ut texten till question div taggen i html, men dock blir det promise. Hur ändrar man detta, så frågan kommer ut istället för object promise?

hm, är inte med helt hundra, du tänkte på att jag givit async function myQuiz () "myQuiz" att det inte finns någit argument inom denna?

men har det något att göra med varför det dyker upp promise och inte min fråga eller?

Hej!

det är så att jag jobbar med quizen och hade gjort fel då man inte skulle skapa sina egna frågor.

Utan man ska alltså hämta dom med RESTful api.

https://jsfiddle.net/fpz2bxe4/1/

där är länken till allt jag gjort och har lite problem med att hämta ut svaren, har skapat en for if sats där jag skapat så att det ska egentligen känna av om det ska vara en input som ska ut annars är det radiobuttons. Men vet inte hur man fixar detta, vad är det för fel jag gjort? Går inte ens att starta quizet nu efter att jag skapat den koden.

Frågan kommer fram, men inget annat svarsalternativ eller input

@Leedow:

localhost/:61 Uncaught SyntaxError: Identifier 'alternatives' has already been declared
at Object.<anonymous> (build.js:250)
at __webpack_require__ (build.js:20)
at Object.<anonymous> (build.js:83)
at __webpack_require__ (build.js:20)
at build.js:63
at build.js:66

menar du detta?

får inte till det med alternatives hur det ska känna av om det ska vara en input eller fler alternativ så radiobuttons kommer fram som svarsalternativ. om du förstår hur jag menar?

@Leedow:

tänkte bara kolla med dig och er här.

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  return jsonQ.question
}
myQuiz().then((text) => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})

efter jag har gjort denna kod som skrivit ut frågan, så vad bör man göra i nästa steg? göra så att man kan svara antar jag? och svarar man rätt så kommer man vidare till fråga två. Hur löser man detta på smidigaste sett?

Hej!

jag sitter nu på denna kod och försöker få det att fungera.

async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  return jsonQ.question
}
myQuiz().then((text) => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})


let answerURL = 'http://vhost3.lnu.se:20080/answer/1'
let answer = {answer: 0}

async function getNextQ (Q) {
  let question = await myQuiz(myQ)

  answerURL = question.nextAnswerUrl

  if(question.alternatives === undefined) {
  let fAnswer = document.createElement('input')
  fAnswer.setAttribute('text', 'type', 'id', 'answerForm', 'name', 'answerForm')
  fo.appendChild(fAnswer)
} else {
  for (let prop in question.alternatives) {
    let rButton = document.createElement('input')
    let label = document.createElement('label')
    rButton.setAttribute('type', 'radio', 'value',`${prop}`)
    rbutton.setAttribute('id', `${prop}`, 'name', 'radioAnswer')
    label.setAttribute('for', `${prop}`)
    label.textContent = `${question.alternatives[prop]}`
    fo.appendChild(rButton)
    fo.appendChild(label)
  }
}
}

async function request (URL) {
  const response = await window.fetch(URL)
  const data = await response.json()
  question = data.question
  answerURL = nextURL
  alternatives = data.alternatives
}

async function response (answerURL) {
  let answerR = await window.fetch(this.answerURL, {
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(answer)
  })
}

frågan skrivs ut, men vill att svarsalternativen ska komma fram med, antingen en input där man ska skriva in svaret för att komma till nästa eller radiobuttons där det finns fler svarsalternativ.

Tror jag har nästan all kod rätt, men vet inte vad som saknas för att få det att fungera, hade uppskattat all hjälp om ni kan hjälpa mig med detta verkligen.

html koden:

	<div class="container">
<h1>Markus Wiland Quiz</h1>
		</div>
	</header>
	
	<div id="quiz">
		<div id="starter">
			<i>  Skriv in ditt smeknamn för att kunna starta quizen.</i>
			</div>
<form id="formbox">
		<input type="text" id="nameInput" placeholder="smeknamn">
		<input type="button" id="nameButton" value="starta">
</form>
		<div id="question-wrapper">
			
            <i>Ditt smeknamn:</i>
          <div id="displayedName"></div>
		Du har <b><span id="countdowntimer">20</span></b> kvar på dig att lösa frågan
	<p id="questions"></p>
	<p id='alts'></p> 
	<div id="answerForm"></div>
	<input type="button" id="sumbit" value="Svara">
	</div>
	</div>

async function getQuestion (o) {
  let question = await myQuiz(myQ)

  if (question.alternatives === undefined) {
    let f = document.createElement('input')
    f.setAttribute('type', 'text', 'id', 'name', 'inputAnswer')
    form.appendchild(f)
  } else {
    for (let alt in question.alternatives) {
      let rButton = document.createElement('input')
      let lButton = document.createElement('label')
      rButton.setAttribute('type', 'radio', 'value', alt)
      rButton.setAttribute('id', alt, 'name', 'radioAnswer')
      lButton.setAttribute('for', alt)
      lButton.textContent = `${question.alternatives[alt]}`
      form.appendchild(rButton)
      form.appendchild(lButton)
    }
    userAnswer.appendchild()
  }
}

Behöver hjälp med denna kod. Ska göra så att for loopen känner av om det finns 1 eller fler alternativ, och ska då komma fram et textbox om den känner av att det endast finns 1 och finns det fler, ska det komma fram radiobuttons.

Vad är det jag gör för fel. hämtar fråga och svaren med api. ska man bygga ett object? och hur ska det se ut i så fall för att kunna hämta ut detta? Hade uppskattat all hjälp.

async function myQuiz (id) {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  return jsonQ.question
}
myQuiz().then((text) => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})

hämtar frågan här.