Przypsianie kilku zmiennym wartości z tablicy

Bo pomyślałem sobie żeby stworzyć jakiegoś pustego stringa do którego będą trafiać kolejne pytania. Jednak chciałbym utworzyć też jakąś pustą tablice do której bym wrzucił pytania z tablicy pierwotnej, a następnie to porównywać ze sobą te dwie tablice a następnie odrębne pytania wrzucać do tego pustego stringa

Napisałem taki kod ale za każdym razem jest ciągle ostatnie pytanie https://jsfiddle.net/3wncq2kd/. I nie jestem do końca pewny czy z tym innerHTML tak można robić

Nie bardzo wiem, jak poprawić Twój kod, gdyż robi on w zasadzie coś innego, niż piszesz, że chcesz zrobić. Zobacz:

const headQuestions = document.getElementById('header-questions');

Pobierasz element HTML, w którym umieścisz pytanie. Poprawnie.

headQuestions.innerHTML = 'What is the most used programming language in 2019?';
headQuestions.innerHTML = 'Who is the President of US?';
headQuestions.innerHTML = 'What does HTML stand for?';
headQuestions.innerHTML = 'What year was JavaScript launched?';

Przypisujesz cztery razy do tej samej zmiennej. Dlatego też za każdym odświeżeniem strony właściwość innerHTML zmiennej headQuestions będzie mieć wartość "What year was JavaScript launched?" Napisał już o tym @szatkus w komentarzu wyżej.

  let questArr = [
    'What is the most used programming language in 2019?',
    'Who is the President of US?',
    'What does HTML stand for?',
    'What year was JavaScript launched?'
  ];

Tworzysz tablicę z pytaniami. Poprawnie.

  let questStr = 'header-questions';

Zapisujesz ID elementu HTML do pobrania i umieszczenia w nim pytania. Teoretycznie poprawnie – zakładając, że usuniesz kod, o którym pisałem powyżej, a po prostu wywołasz funkcję.

  let copyQuestArr = [];
  for (let i = 0; i < questArr.length; i++) {
    copyQuestArr.push(questArr[i]);
  }

Kopiujesz pytania z jednej tablicy do drugiej. Nie wiem, czemu to robisz; moim zdaniem nie ma to związku z wyświetlaniem losowego pytania.

  for (const i in copyQuestArr) {
    var elArrs = document.getElementById(questStr);
    elArrs = copyQuestArr[i].innerHTML = questArr[i];
  }

Dla każdego pytania robisz dwie rzeczy. Najpierw pobierasz element HTML, w którym je chcesz umieścić. Następnie wykonujesz dwa przypisania: najpierw właściwości copyQuestArr[i].innerHTML przypisujesz wartość questArr[i], a potem zmiennej elArrs przypisujesz wartość, którą zwraca przypisanie copyQuestArr[i].innerHTML = questArr[i] – czyli też wartość questArr[i] (jeśli chcesz wiedzieć, czemu tak jest, poczytaj to -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#precedence_and_associativity). Gdybyś tę funkcję wywołał, wartość właściwości innerHTML pobranego elementu HTML byłaby po wywołaniu zawsze ostatnim pytaniem.

  return elArrs;

Zwracasz wartość zmiennej, która nie jest zadeklarowania bezpośrednio w bloku ciała funkcji. Gdybyś wywołał tę funkcję, to by zadziałało (najprawdopodobniej z uwagi na tzw. hoisting – https://developer.mozilla.org/en-US/docs/Glossary/Hoisting), jednak nie jest to dobrze napisany kod. Z jedną zmienną można jeszcze dojść, co się dzieje, ale gdybyś takich zmiennych miał 10 w jednym pliku, czytałbyś go pewnie dwa razy dłużej, żeby zrozumieć, co się dzieje w kodzie. W takim przypadku jak Twój zmienna, której wartość jest zwracana, powinna zostać zadeklarowana bezpośrednio w bloku ciała funkcji.

Poza tym nigdzie funkcji nie wywołujesz.

UPDATE Żeby zrobić to, czego oczekujesz, czyli wyświetlić za każdym odświeżeniem strony nowe pytanie, to najprościej będzie chyba tak:

1. Pobierasz element HTML, w którym umieścisz pytanie (to już masz).
2. Tworzysz tablicę z pytaniami (to już masz).
3. Losujesz liczbę całkowitą z przedziału [0, rozmiar tablicy z pytaniami - 1], korzystając z metody Math.random() (to trzeba by jeszcze zrobić).
4. Przypisujesz właściwości innerHTML pobranego elementu HTML ten element tablicy, którego indeks jest równy wylosowanej liczbie (to trzeba by jeszcze zrobić).

UPDATE2 Żeby na każde naciśnięcie przycisku Wyślij pojawiało się nowe pytanie, ale bez odświeżania strony, to najprościej chyba będzie tak:

1. Wykonujesz te cztery punkty, które napisałem wyżej.
2. Kod, który powstał po ich wykonaniu, umieszczasz w nowej funkcji. Funkcja nie powinna pobierać argumentów ani zwracać niczego.
3. Tę nową funkcję wywołujesz przy zdarzeniu onclick przycisku Wyślij. Zobacz na przykład: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

Pamiętaj, że przy tak niewielkiej liczbie pytań i takim podejściu czasem to samo pytanie może być wyświetlone 2 lub 3 razy pod rząd. Jeśli chciałbyś tego uniknąć, powinieneś dodatkowo:

1. utworzyć zmienną globalną (to znaczy poza jakąkolwiek funkcją);
2. w funkcji uruchamianej po naciśnięciu przycisku losować indeks tak długo, aż będzie on różny od wartości tej zmiennej; możesz tutaj wykorzystać np. pętlę do-while – możesz zmodyfikować na przykład kod z mojego poprzedniego posta: https://4programmers.net/Forum/JavaScript/349748-przypsianie_kilku_zmiennym_wartosci_z_tablicy?p=1749451#id1749451
3. po wylosowaniu przypisywać tej zmiennej wylosowany indeks.

Napisałem kod https://jsfiddle.net/n29dr485/ do tych czterech punktów
Pobierasz element HTML, w którym umieścisz pytanie (to już masz).
Tworzysz tablicę z pytaniami (to już masz).
Losujesz liczbę całkowitą z przedziału [0, rozmiar tablicy z pytaniami - 1], korzystając z metody Math.random() (to trzeba by jeszcze zrobić).
Przypisujesz właściwości innerHTML pobranego elementu HTML ten element tablicy, którego indeks jest równy wylosowanej liczbie (to trzeba by jeszcze zrobić)
ale pojawia mi się komunikat element is null. Zastanawiam się co jest nie tak. Analizuje ale nic z tego
Ok poprawiłem https://jsfiddle.net/f46bnt7u/2/. Czy w tej funkcji jest teraz wszystko ok jeśli chodzi o powyższe cztery punkty czy powinieniem coś poprawić?

Jeśli chodzi o powyższe cztery punkty, jest OK. (Tym niemniej widzę kilka mniej ważnych rzeczy niezwiązanych z nimi, które można by poprawić).

No dobrze. A teraz https://jsfiddle.net/zy1dp0q9/5/?

Czy teraz ta funkcja jest ok? Bo chciałbym przejść dalej do pisania kodu nie ukrywam ale zanim to nastąpi chciałbym się upewnić czy tutaj jest wszystko ok?

Lepiej. :) Jeśli już chcesz ulepszać, to jeszcze:

1. Kod const btnSubmit = document.querySelector('button'); – pobiera pierwszy element HTML <button> na stronie. Teraz ten kod działa, ale jak np. dodasz kolejny przycisk (np. Anuluj :P ), to przestanie. Lepiej, żebyś przyciskowi do wysyłania formularza dodał klasę i na podstawie nazwy tej klasy go pobierał, a nie na podstawie jego "typu".
2. Nazwa zmiennej funkcji questQuiz – istnieje taka konwencja, że nazwy metod i funkcji opisuje się czasownikami, coś na kształt trybu rozkazującego. Nie wiem, czy tutaj ją zastosowałeś? – bo zarówno "quest", jak i "quiz" jest i rzeczownikiem, i czasownikiem. Moim zdaniem lepiej by brzmiało: getRandomQuestion, nie wiem, czy się zgodzisz.

I teraz tworze zmienną globalną do której początkowo przypisuje wartość 0? Pytam odnośnie tego

utworzyć zmienną globalną (to znaczy poza jakąkolwiek funkcją);
w funkcji uruchamianej po naciśnięciu przycisku losować indeks tak długo, aż będzie on różny od wartości tej zmiennej; możesz tutaj wykorzystać np. pętlę do-while – możesz zmodyfikować na przykład kod z mojego poprzedniego posta: Przypsianie kilku zmiennym wartości z tablicy
po wylosowaniu przypisywać tej zmiennej wylosowany indeks.

Jeśli chcesz mieć pewność za każdym razem innego pytania, to tworzysz taką zmienną, tak. Natomiast nie będzie dobrze przypisać do niej wartości 0. Dlaczego? Dlatego, że ta zmienna reprezentuje indeks, indeksować można wartością 0 (w JavaScripcie), a wartość początkowa tej zmiennej powinna być różna od każdego możliwego indeksu. Teoretycznie mógłbyś przypisać do niej jakąkolwiek wartość poza zbiorem wartości indeksu (zbiór wartości indeksu dla każdej tablicy w JavaScripcie to [0, długość tablicy - 1]). W praktyce najbardziej intuicyjnie jest przypisać do niej -1.

Jeszcze: dlaczego wartość początkowa tej zmiennej powinna być różna od każdego możliwego indeksu (w tablicy pytań)? Dlatego, że przypisując jakiś możliwy indeks nigdy go nie wylosujesz nie wylosujesz go podczas wyświetlania pierwszego pytania. Oczywiście piszę to w kontekście tej pętli, którą ja zaproponowałem. Jeśli byś takiej pętli nie zrobił, to być może mogłaby być to wartość indeksu, to już zależałoby od kodu.

PS W zasadzie w JavaScripcie być może lepiej niż -1 byłoby przypisać undefined. W sumie nie jestem pewien. Ty przypisz -1 – dla Twojego zastosowania jest wystarczająco dobre.

UPDATE Poprawiłem błąd.

A odnośnie tego w funkcji uruchamianej po naciśnięciu przycisku losować indeks tak długo, aż będzie on różny od wartości tej zmiennej; możesz tutaj wykorzystać np. pętlę do-while to zrobić w jakiejś nowej funkcji czy w tej?

btnSubmit.addEventListener('click', function() {
	answerQuiz(), randomAnswersQuiz();
});

Generalnie nie ma znaczenia, czy kod pętli umieścisz w funkcji anonimowej będącej handlerem zdarzenia click, czy w funkcji "nie-anonimowej", którą dopiero umieścisz w tej funkcji anonimowej. Ja bym jednak radził, żebyś wszystko zrobił w funkcji "nie-anonimowej" (czyli tej pobierającej pytanie – już trochę pogubiłem się w nazwach u Ciebie), a w funkcji anonimowej umieścił jedynie samo wywołanie tej funkcji.

Szczerze powiedziawszy mam problem z napisaniem tego: w funkcji uruchamianej po naciśnięciu przycisku losować indeks tak długo, aż będzie on różny od wartości tej zmiennej; możesz tutaj wykorzystać np. pętlę do-while – możesz zmodyfikować na przykład kod z mojego poprzedniego posta. Powstaje mi pętla nieskończona

Kod na kształt tego umieść w funkcji (pisałem z głowy):

const questions = [ /* tu pytania */ ];
let oldIndex = -1;
let index = -1;

do {
    index = Math.floor(Math.random() * questions.length);
} while(index === oldIndex);

oldIndex = index;

Wiesz co luknąłbyś bo to jest ten kod

function getRandomQuestion() {
	const headQuestions = document.getElementById('header-questions');
	let questArr = [
		'What is the most used programming language in 2019?',
		'Who is the President of US?',
		'What does HTML stand for?',
		'What year was JavaScript launched?'
	];
	do {
		var randomQuestIndex = Math.floor(Math.random() * questArr.length);
	} while (randomQuestIndex === randomIndex);
	randomIndex = randomQuestIndex;
	headQuestions.innerHTML = questArr[randomQuestIndex];
}

ale pare razy mi sie powtarzają po sobie pytania

https://jsfiddle.net/4t96pxgv/

Powtarzają się najpewniej dlatego, że masz podwójne wywołanie funkcji. Zauważ, że zmienna randomIndex jest "zewnętrzna" w stosunku do obu wywołań. W związku z tym wykonanie kodu jest takie:

Po załadowaniu/przeładowaniu strony:

1. Zmienna randomIndex otrzymuje wartość -1.

Po pierwszym kliknięciu na przycisk "Wyślij":

1. Uruchamiane jest wywołanie zdefiniowane za pomocą atrybutu onclick.
2. Zmienna randomIndex otrzymuje jakąś wartość różną od jej obecnej wartości, czyli różną od -1. Oznaczmy tę nową wartość x1.
3. Właściwość innerHTML elementu headQuestions przechowuje teraz pytanie o indeksie x1. Tego pytania nie widzisz, bo dalszy kod za szybko się wykonuje.
4. Wywołanie jest kończone.
5. Uruchamiane jest wywołanie zdefiniowane w funkcji addEventListener.
6. Zmienna randomIndex otrzymuje jakąś wartość różną od jej obecnej wartości, czyli różną od x1. Oznaczmy tę nową wartość y1.
7. Właściwość innerHTML elementu headQuestions przechowuje teraz pytanie o indeksie y1. To pytanie widzisz.
8. Wywołanie jest kończone.

Po drugim kliknięciu na przycisk "Wyślij":

1. Uruchamiane jest wywołanie zdefiniowane za pomocą atrybutu onclick.
2. Zmienna randomIndex otrzymuje jakąś wartość różną od jej obecnej wartości, czyli różną od y1. Oznaczmy tę nową wartość x2.
3. Właściwość innerHTML elementu headQuestions przechowuje teraz pytanie o indeksie x2. Tego pytania nie widzisz, bo dalszy kod za szybko się wykonuje.
4. Wywołanie jest kończone.
5. Uruchamiane jest wywołanie zdefiniowane w funkcji addEventListener.
6. Zmienna randomIndex otrzymuje jakąś wartość różną od jej obecnej wartości, czyli różną od x2. Oznaczmy tę nową wartość y2.
7. Właściwość innerHTML elementu headQuestions przechowuje teraz pytanie o indeksie y2. To pytanie widzisz.
8. Wywołanie jest kończone.

Zauważ, że wartości y1 oraz y2 mogą być takie same.

Rozwiązaniem jest usunięcie jednego z wywołań funkcji. Sugerowałbym usunięcie wywołania zdefiniowanego w atrybucie onclick.

Ok teraz działa. Tylko problem jest jeszcze jeden. Mianowicie gdy załaduje się za pierwszy razem aplikacja https://jsfiddle.net/5y1xhba3/ to w miejscu pytania jest widoczny napis Question. A gdybym tak chciał użytkownikowi pokazać Od razu jakieś dowolne pytanie to co musiałbym zrobić? Użyć zdarzenia DOMContentLoaded?

Kiedyś w JSFiddle było tak: https://stackoverflow.com/a/35131116/4752834 – zwróć uwagę na zrzut ekranu. To znaczy, można było wybrać sobie w opcjach zdarzenie, na które ma być uruchamiany kod JavaScript. Dziś tej opcji nie mogę znaleźć. Ale: kod pod linkiem w pytaniu pod tym linkiem działa przy zdarzeniu DOMContentLoaded, ale nie przy zdarzeniu load. W związku z tym domyślam się, że automatycznie Twój kod uruchamiany jest na zdarzenie load. Możesz więcej poczytać -> https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event W skrócie: zdarzenie load jest wywoływane po zdarzeniu DOMContentLoaded. Co najprawdopodobniej oznacza, że nie o te dwa zdarzenia chodzi w Twoim kodzie.

Zauważ, że wywołujesz funkcję getRandomQuestion(); tylko na zdarzenie click. Powinieneś dodać wywołanie tej funkcji jeszcze raz, w zasięgu globalnym. Czyli na przykład tak (podaję kod, bo tak najprościej mi wytłumaczyć):

getRandomQuestion(); // <- To dodajesz

btnSubmit.addEventListener('click', function() {
  answerQuiz(), randomAnswersQuiz(), getRandomQuestion();
});

Teraz zastanawiam się nad taką jedną rzeczą. Bo w sumie już ta aplikacja jest niemal gotowa bo to co chciałem do tej pory w niej zaimplementować to to zrobiłem. Natomiast pozostał mi jeszcze jedne problem do rozwikłania. Mianowicie na każe postawione użytkownikowi pytanie zmieniać warianty odpowiedzi tak jak to jest w tym quizie https://10projects10hours.netlify.app/quiz-app/index.html. Zastanwiam się po prostu czy aby nie utworzyć jakiegoś obiektu np. w tej funkcji który by przetrzymywał wszystkie warianty odpowiedzi. Czy to jest dobry krok w tym kierunku? Lub ewentualnie pomyślałem jeszcze nad tablicą wielowymiarową?

A jakby to miało wyglądać w kodzie? Pokaż któreś z tych rozwiązań.

Przyszło mi do głowy jeszcze jeden pomysł. Mianowicie kiedy użytkownikowi wyświetli się jakieś pytanie np. What is the most used programming language in 2019? i pojawią mu się te warianty odpowiedzi Java, C, Python, JS, to teraz mam dwie fukcje

function answerQuiz() {
	let arrAnswersQuiz = [ 'Java', 'C', 'Python', 'JS' ];
	let arrVariantsAns = [ 'a', 'b', 'c', 'd' ];
	for (const i in arrVariantsAns) {
		var elements = (document.getElementById(arrVariantsAns[i]).innerHTML = arrAnswersQuiz[i]);
	}
	return elements;
}

function randomAnswersQuiz() {
	const answers = [ 'Java', 'C', 'Python', 'JS' ];
	for (const id of [ 'a', 'b', 'c', 'd' ]) {
		const element = document.getElementById(id);
		const answerIndex = Math.floor(Math.random() * answers.length);
		element.innerText = answers[answerIndex];
		answers.splice(answerIndex, 1);
	}
}

które trzymają te odpowiedzi na to pytanie. Teraz gdy użytkonik zaznaczy jakąś odpowiedź na to pytanie i kliknie przycisk wyślij to pojawi mu się następne pytanie które brzmi: Who is the President of US?. I w tym momencie nie mogę mieć w tablicach obu funkcji do tego pytania odpowiedzi typu Java, C, Python, JS tylko

function answerQuiz() {
	let arrAnswersQuiz = ['Florin Pop', 'Donald Trump', 'Ivan Saldano', ' Mihai Andrei'];
	let arrVariantsAns = [ 'a', 'b', 'c', 'd' ];
	for (const i in arrVariantsAns) {
		var elements = (document.getElementById(arrVariantsAns[i]).innerHTML = arrAnswersQuiz[i]);
	}
	return elements;
}

function randomAnswersQuiz() {
	const answers = ['Florin Pop', 'Donald Trump', 'Ivan Saldano', ' Mihai Andrei'];
	for (const id of [ 'a', 'b', 'c', 'd' ]) {
		const element = document.getElementById(id);
		const answerIndex = Math.floor(Math.random() * answers.length);
		element.innerText = answers[answerIndex];
		answers.splice(answerIndex, 1);
	}
}

i na stronie odnośnie tego pytania nie wyświetlam użytkownikowi już Java,C,Python,JS tylko Florin Pop, Donald Trump, Ivan Saldano i Mihai Adnrei i tak za każdym razem z innym pytanie i zestawem odpowiedzi

Mógłbym zastosować opisane prze zemnie rozwiązanie czy raczej jest ono do kitu?

Ale nie pokazałeś teraz rozwiązania, tylko opisałeś problem. Problem rozumiem. Pisałeś, że chcesz albo (1) zastosować obiekt, albo (2) tablicę wielowymiarową. Według mnie mogłyby te dwa rozwiązania wyglądać tak:

1. Każde pytanie opakowujesz oddzielny w obiekt:

   Kopiuj

   const questions = [
       {
           content = "<question1's content>",
           answers = [
               "<question1's answer1>",
               "<question1's answer2>",
               ...
           ]
       },
       {
           content = "<question2's content>",
           answers = [
               ...
           ]
       },
       ...
   ];
   

2. Każde pytanie wraz z odpowiedziami opakowujesz w oddzielną tablicę:

   Kopiuj

   const questions = [
       [
           "<question1's content>",
           [
               "<question1's answer1>",
               "<question1's answer2>",
               ...
           ]
       ],
       [
           "<question2's content>",
           [
               ...
           ]
       ],
       ...
   ];
   

Oczywiście może pewnie być kilka innych sposobów, ale te dwa są najbardziej intuicyjne w Twoim przypadku. Pierwszy z nich, z obiektami, jest według mnie bardziej intuicyjny, polecam Ci go. Tablica questions powinna być w zasięgu globalnym.

Z innych możliwości – mógłbyś korzystać z usługi sieciowej; wtedy, zamiast korzystać z tablicy o zasięgu globalnym, mógłbyś w każdym wywołaniu funkcji robić żądanie do API tej usługi, które by zwracało odpowiedzi dla danego pytania. Jednak myślę, że to zbyt rozbudowane jak na potrzeby tego projektu. Możesz spróbować pomyśleć o tym w przyszłości, jak będziesz uczyć się już konkretnie backendu.

Dla takiego obiektu jaki mi tu powstał

let questArr = [
	{
		question: 'What is the most used programming language in 2019?',
		answers: [ 'Java', 'C', 'Python', 'JS' ]
	},
	{
		question: 'Who is the President of US?',
		answers: [ 'Florin Pop', 'Joe Biden', 'Ivan Saldano', 'Mihai Andrei' ]
	},
	{
		question: 'What does HTML stand for?',
		answers: [
			'Hypertext Markup Language',
			' Cascading Style Sheet',
			'Jason Object Notation',
			'Helicopters Terminals Motorboats Lamborginis'
		]
	},
	{
		question: 'What year was JavaScript launched?',
		answers: [ '1996', '1995', '1994', 'none of the above' ]
	}
];

musiałbym teraz użyć pętli for in lub pętli zagnieżdżonej

Do tej pory również miałeś pętle, więc myślę, że to będzie coś podobnego. Opakowanie odpowiedzi w "obiekt pytania" nie powinno zmienić wiele. Jedyna większa zmiana moim zdaniem to taka, że powinieneś losować odpowiedzi w funkcji losującej pytanie (a nie oddzielnie od niej).

Przy okazji: moim zdaniem pętla for-of ma bardziej intuicyjne zachowanie niż pętla for-in, i dlatego polecałbym Ci tę pierwszą. Możesz ocenić sam: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#difference_between_for...of_and_for...in (chociaż żeby te różnice zrozumieć, to trzeba rozumieć, jak działa dziedziczenie w JavaScripcie).

Tak się zastanawiam czy nie wyrzucić z tych funkcji

function answerQuiz() {
	let arrAnswersQuiz = [ 'Java', 'C', 'Python', 'JS' ];
	let arrVariantsAns = [ 'a', 'b', 'c', 'd' ];
	for (const i in arrVariantsAns) {
		var elements = (document.getElementById(arrVariantsAns[i]).innerHTML = arrAnswersQuiz[i]);
	}
	return elements;
}

function randomAnswersQuiz() {
	const answers = [ 'Java', 'C', 'Python', 'JS' ];
	for (const id of [ 'a', 'b', 'c', 'd' ]) {
		const element = document.getElementById(id);
		const answerIndex = Math.floor(Math.random() * answers.length);
		element.innerText = answers[answerIndex];
		answers.splice(answerIndex, 1);
	}
}

tych tablic let arrAnswersQuiz = [ 'Java', 'C', 'Python', 'JS' ] i const answers = [ 'Java', 'C', 'Python', 'JS' ]. No bo skoro jest to teraz w obiekcie...?

Generalnie – tak. W funkcji nie powinieneś mieć żadnych danych, bo taki obiekt, o jakim mówimy, ma już w sobie wszystkie potrzebne dane.

Druga sprawa, że być może łatwiej Ci będzie nie zmieniać tych funkcji, które już masz (one działają, więc po co je zmieniać). Usunąłbyś same ich wywołania, a napisałbyś nową funkcję (która będzie podoba do tych poprzednich, ale inna, bo będzie korzystać z nowego obiektu).

Próbuje w tej nowej funkcji napisać sobie(oczywiście z wykorzystaniem tego nowego obiektu) żeby losowało pytanie lecz coś nie chce pyknąć

Na razie tylko tyle

function getRandomVariants() {
	for (let value in quizArr) {
		headQuestions.innerHTML = quizArr[value].question;
	}
}