Przypsianie kilku zmiennym wartości z tablicy

Miejsce deklaracji zmiennych globalnych

Można postawić pytanie: czy wszystkie zmienne globalne powinny być deklarowane w zasięgu globalnym? Przeanalizujmy. Jest pięć zmiennych globalnych:

1. headerQuestion,
2. input,
3. oldQuestionIndex,
4. btnSubmit,
5. quizArr.

Ad 1. Zmienna headerQuestion reprezentuje element HTML przechowujący pytanie. Jest używana tylko w jednym miejscu, w funkcji showRandomQuestion. Tak więc lepiej zrobić ją lokalną. Przenieś jej deklarację do funkcji showRandomQuestion.

Ad 2. Zmienna input reprezentuje listę elementów HTML przechowujących odpowiedzi. Jest używana w dwóch miejscach: w funkcji validateIfChecked oraz w handlerze kliknięcia na przycisk Submit. Tak więc lepiej zrobić ją lokalną. Przenieś jej deklarację w dwa miejsca: do funkcji validateIfChecked oraz do handlera kliknięcia na przycisk Submit.

Ad 3. Zmienna oldQuestionIndex reprezentuje indeks poprzedniego pytania. Jest używana tylko w jednym miejscu, w funkcji getRandomQuestion. Powinna być "zewnętrzna" w stosunku do kodu wyświetlającego poszczególne pytania. Jedyne miejsce, jakie mi przychodzi do głowy, to właśnie to, gdzie jest obecnie; więc – tutaj nic nie zmieniaj, zmienna powinna zostać globalna.

Ad 4. Zmienna btnSubmit reprezentuje przycisk Submit. Jest używana tylko w jednym miejscu, w zasięgu globalnym. Tutaj nie da się nic zmienić; zmienna powinna zostać globalna.

Ad 5. Zmienna quizArr reprezentuje listę pytań i wariantów odpowiedzi. Jest używana w trzech miejscach: w funkcji getRandomQuestion, w funkcji getRandomVariants oraz w funkcji showRandomQuestion. Ponieważ lista pytań i wariantów odpowiedzi jest jakby konfiguracją aplikacji, to myślę, że najlepiej będzie zostawić ją globalną.

Sposób wykorzystania zmiennych globalnych

Wszystkie zmienne globalne, które jeszcze zostały, powinny być deklarowane globalnie. Niemniej można postawić następne pytanie: czy ze wszystkich z nich funkcje powinny korzystać tak jak ze zmiennych globalnych? Inaczej mówiąc, czy nie można by tych zmiennych przekazać w parametrze funkcji? Przeanalizujmy. Po zmianach, o których napisałem wyżej, powinny zostać trzy zmienne globalne:

1. oldQuestionIndex,
2. btnSubmit,
3. quizArr.

Ad 1. Zmienna oldQuestionIndex nie może być przekazana jako parametr funkcji getRandomQuestion, ponieważ jest w niej zmieniana. Powinna zostać, jak jest.

Ad 2. Zmienna btnSubmit nie może być przekazana jako parametr funkcji, bo jest wykorzystywana w zasięgu globalnym (czyli poza jakąkolwiek funkcją). Powinna zostać, jak jest.

Ad 3. Zmienna quizArr może być przekazana jako parametr wszystkich funkcji, w których jest używana: getRandomQuestion, getRandomVariants oraz showRandomQuestion. Dodaj w każdej z tych funkcji po jednym parametrze o takiej samej nazwie jak ta zmienna.

Na razie tyle. Może się z czymś nie zgadzasz, co napisałem? Może czegoś nie rozumiesz? Pytaj. Jeśli rozumiesz wszystko, to zrób zmiany i zobaczymy, co można dalej w kodzie zrobić.

Gdybym chciał przejść do pisania tego kroku 'Natomaist jeżeli chodzi o to ustalenie po jakiej ilości pytań zakończyć gre(chodzi o to żeby użytkownik odpowiedział na cztery pytania ale żeby każde pytanie było unikatowe a nie występowało po sobie) to chodzi mi o to że użytkwonik może odpowiedzieć na cztery pytania które w moim przypadku wyświetlają się w losowej kolejności i po tych czterech pytaniach pojawia mu się ile zdobył punktów czyli to o czym piszałem wyżej.' od czego muszę zacząć?

Powiedziałbym, że wymieniasz tutaj dwie funkcjonalności:

1. licznik punktów,
2. wyświetlanie każdego pytania tylko raz.

Są one niezależne, czyli można zaimplementować jedną nie implementując drugiej. Zacznijmy od licznika punktów.

Jakich nowych rzeczy potrzeba:

1. jedna zmienna, przechowująca stan licznika, czyli ile punktów jest aktualnie; powinna być umieszczona w sessionStorage;
2. dla każdego pytania jedna zmienna, przechowująca indeks poprawnej odpowiedzi; zmienne te powinny być umieszczone w obiektach pytań;
3. zwiększenie liczby punktów w zależności od tego, która odpowiedź jest zaznaczona; to powinna być jedna instrukcja if, umieszczona w pętli przechodzącej po wszystkich odpowiedziach w handlerze kliknięcia na przycisk "Submit";
4. etykieta na stronie, przechowująca stan licznika po każdym pytaniu; może być umieszczona np. pod przyciskiem.

Jakie rzeczy trzeba zmienić:

1. Trzeba przenieść instrukcję sessionStorage.removeItem('lastQuestIndex'); tuż za pętlę for, bo inaczej nie będzie można określić, dla którego pytania powinniśmy sprawdzać poprawną odpowiedź.

To tak ogólnie. Zacznij, spróbuj zrozumieć. W przypadku niejasności pytaj.

Pytanie odnośnie tego jedna zmienna, przechowująca stan licznika, czyli ile punktów jest aktualnie; powinna być umieszczona w sessionStorage;
zacząłem pisać kod. Dobrze?:

	let startCount = 0;
	if (sessionStorage.getItem('currentlyPoints') === null) {
		sessionStorage.setItem('currentlyPoints', startCount);
	}

I mam pytanie odnośnie tego pytania '''dla każdego pytania jedna zmienna, przechowująca indeks poprawnej odpowiedzi; zmienne te powinny być umieszczone w obiektach pytań'''. Chodzi o to żeby do każdej tablicy z pytaniami zrobić zmienną która będzie przechowywać aktualny indeks z poprawną odpowiedzią?
Ad 2:

const quizArr = [
	{
		question: {
			correctAnswerIndex: getRandomVariants(answer),
			quest: '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 Lamborgini'
		]
	},
	{
		question: 'What year was JavaScript launched?',
		answers: [ '1996', '1995', '1994', 'none of the above' ]
	}
];

Chodzi o to żeby do każdej tablicy z pytaniami zrobić zmienną która będzie przechowywać aktualny indeks z poprawną odpowiedzią?

Tak, o to chodzi. Ale nie w ten sposób, który pokazałeś wyżej. Zmienna, a dokładnie: właściwość, powinna być zdefiniowana dla "obiektu pytania", a nie dla samego pytania. Mówiąc inaczej, powinna być zdefiniowana "na tym samym poziomie", co właściwości question oraz answers. I powinna być po prostu liczbą (tak zwanym literałem liczbowym), a nie wywołaniem funkcji.

Odnośnie tego kodu wyżej ze zmienną startCount: mnie chodziło o coś innego. Zmienna przechowująca stan licznika powinna być jedynie w sessionStorage, czyli nie powinna być definiowana/deklarowana w zasięgu globalnym przez let, var czy const. Powinna być pobierana i zmieniana jedynie w tej instrukcji if, o której napisałem w punkcie 3.

Zastanawiam się, czy rozumiesz, jak wygląda tzw. przepływ sterowania (control flow) w tym kodzie (w jakiej kolejności wykonywane są poszczególne instrukcje). Jutro postaram się to opisać. Poza tym dobrze by było, żebyś rozumiał, jak działa zasięg (scope) w JavaScripcie -> https://developer.mozilla.org/en-US/docs/Glossary/Scope

UPDATE Przepraszam, okazało się, że jednak zbyt mało wiem, żeby opisać to, co chciałem. Ale nic straconego – już zabrałem się za powtórkę tych zagadnień. Zobaczymy, czy coś z tego wyjdzie. :) Generalnie idźmy dalej w pisaniu kodu, a najwyżej będę tłumaczyć poszczególne rzeczy zamiast całości naraz.

Czy teraz jest ok:

const quizArr = [
	{
		currentAnswerIndex: 0,
		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 Lamborgini'
		]
	},
	{
		question: 'What year was JavaScript launched?',
		answers: [ '1996', '1995', '1994', 'none of the above' ]
	}
];

Bo z tego co ty tutaj piszesz "Tak, o to chodzi. Ale nie w ten sposób, który pokazałeś wyżej. Zmienna, a dokładnie: właściwość, powinna być zdefiniowana dla "obiektu pytania", a nie dla samego pytania. Mówiąc inaczej, powinna być zdefiniowana "na tym samym poziomie", co właściwości question oraz answers. I powinna być po prostu liczbą (tak zwanym literałem), a nie wywołaniem funkcji.", właśnie wywnioskowałem coś takiego. Czy może raczej tak?:

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

Na razie napisałem kod dla tych 3 wymienionych tutaj punktów

jedna zmienna, przechowująca stan licznika, czyli ile punktów jest aktualnie; powinna być umieszczona w sessionStorage;
dla każdego pytania jedna zmienna, przechowująca indeks poprawnej odpowiedzi; zmienne te powinny być umieszczone w obiektach pytań;
zwiększenie liczby punktów w zależności od tego, która odpowiedź jest zaznaczona; to powinna być jedna instrukcja if, umieszczona w pętli przechodzącej po wszystkich odpowiedziach w handlerze kliknięcia na przycisk "Submit";

Tu jest kod https://jsfiddle.net/6d1o8by4/1/

Czekaj może po kolei. Staram się ściśle trzymać tego co piszesz dlatego chce żebyś w miare możliwości też sprawdzał co pisze ponieważ potrzebuje kogoś kto wytknie mi jakieś błędy. Chciałem cię zapytać o to co napisałeś tutaj odnośnie tego obiektu z tymi pytaniami i odpowiedzami

Tak, o to chodzi. Ale nie w ten sposób, który pokazałeś wyżej. Zmienna, a dokładnie: właściwość, powinna być zdefiniowana dla "obiektu pytania", a nie dla samego pytania. Mówiąc inaczej, powinna być zdefiniowana "na tym samym poziomie", co właściwości question oraz answers. I powinna być po prostu liczbą (tak zwanym literałem), a nie wywołaniem funkcji.

A tutaj jest fragment kodu za to odpowiedzialny

const quizArr = [
    {
        currentAnswerIndex: 0,
        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 Lamborgini'
        ]
    },
    {
        question: 'What year was JavaScript launched?',
        answers: [ '1996', '1995', '1994', 'none of the above' ]
    }
];

Po prostu powiedz co napisałem(oczywiście w kontekście do twoich słow przytoczonych przeze mnie wyżej)źle. Czy powinienm to poprawić czy zostawić to tak jak jest

Tak, jak napisałem wyżej w komentarzu – ten kod -> https://jsfiddle.net/6d1o8by4/1/ jest ogólnie w porządku, jeśli chodzi o tablicę quizArr. Tylko jeszcze zmień nazwę właściwości – lepsza jest correctAnswerIndex niż currentAnswerIndex; ta druga nazwa nie ma sensu w tym kontekście, bo nie chodzi o odpowiedź "bieżącą" ("current"), tylko "poprawną" ("correct").

Przy okazji: ogólnie nazewnictwo jest jednym z najważniejszych zagadnień w programowaniu; a utarło się, że jednym z najtrudniejszych w informatyce w ogóle. Nie wiem, czy znasz ten cytat (źródło -> https://martinfowler.com/bliki/TwoHardThings.html):

There are only two hard things in Computer Science: cache invalidation and naming things.

W związku z tym pytanie: dlaczego nazwałeś zmienną akurat startCount?

A wracając: ten kod:

if (input[i].checked) {
    startCount = startCount + 1
}

Dwa pytania odnośnie niego:

1. Załóżmy, że najpierw odpowiadasz na jedno pytanie (bez różnicy, czy poprawnie czy nie), a potem odświeżasz stronę. Jaką wartość będzie mieć zmienna startCount?
2. Załóżmy, że odpowiadasz na jedno pytanie niepoprawnie (już bez odświeżania strony). Jaką wartość będzie mieć zmienna startCount?

Napisałeś tutaj

Jeśli chodzi o drugie pytanie: powiem Ci, że nie brałem pod uwagę w ogóle funkcji calculatePoints;.

Czyli chodzi ci o to żeby w ogóle nie tworzyć nowej funkcji tylko zmienną która przechowuje liczbe punktów zdefiniować w funckji showRandomQuestion i tam zapisywać ją do localStorage, a w handlerze na przycisk zwiększać jej wartość?

Bo po prawdzie zastanwiałem się przez tydzień jak do tego podejść. Pytam bo próbuje w jakiś sposób analizować to co napisałeś?

Generalnie: tak, chodzi mi o to, że nie musi być oddzielnej funkcji. Jeśli koniecznie chciałbyś, mogłaby być, tylko wtedy trzeba byłoby inaczej podejść do pewnych miejsc kodu. A konkretnie: myślałem o takim rozwiązaniu, że liczba punktów przechowywana jest wyłącznie w sessionStorage, i nawet nie ma zmiennych lokalnych, które by ją przechowywały.

UPDATE No, może jest, powiedzmy, jedna; tak to byłoby dość nieporęcznie powiększać liczbę punktów. Ale to już kwestia wygody czy elegancji zapisu, nie logiki kodu.

Ok. A gdybym chciał to zrobić w odrębnej funkcji to co konkretnie trzeba zmienić w kodzie. Bo generalnie staram się trzymać schematu że każda funkcja do czegoś innego. Nie chce żeby jedna funkcja robiła n-rzeczy. Pytam tylko tak orientacyjnie gdybym w przyszłości chciał zmienić coś w tym kodzie

Trudno mi powiedzieć. Myślę że po prostu spróbuj to zrobić, a ja będę poprawiać w trakcie, jeśli będzie trzeba. :)

Ten sessionStorage odnośnie tego licznika punktów powinno być umieszczone w if lub else czy po prostu pojednyncza linijka kodu sessionStorage.setItem pod koniec całego tego waunku:

	if (sessionStorage.getItem('lastQuestIndex') === null) {
		displayQuestQizIndex = getRandomQuestion(quizArr);
		variants = getRandomVariants(displayQuestQizIndex);
		sessionStorage.setItem('lastQuestIndex', displayQuestQizIndex);
		sessionStorage.setItem('lastAnswersIndices', JSON.stringify(variants));
	} else {
		displayQuestQizIndex = sessionStorage.getItem('lastQuestIndex');
		variants = JSON.parse(sessionStorage.getItem('lastAnswersIndices'));
	}

Funkcja showRandomQuestion wygląda teraz tak:

function showRandomQuestion() {
	const headerQuestion = document.getElementById('header-question');
	let displayQuestQizIndex = -1;
	let pointsCounter = 0;
	let variants = [];
	if (sessionStorage.getItem('lastQuestIndex') === null) {
		displayQuestQizIndex = getRandomQuestion(quizArr);
		variants = getRandomVariants(displayQuestQizIndex);
		sessionStorage.setItem('lastQuestIndex', displayQuestQizIndex);
		sessionStorage.setItem('lastAnswersIndices', JSON.stringify(variants));
		sessionStorage.setItem('lastAnswersIndices', pointsCounter);
	} else {
		displayQuestQizIndex = sessionStorage.getItem('lastQuestIndex');
		variants = JSON.parse(sessionStorage.getItem('lastAnswersIndices'));
	}
	const questionObject = quizArr[displayQuestQizIndex];
	const labelAnswerA = document.getElementById('label-answer_A');
	labelAnswerA.innerHTML = questionObject.answers[variants[0]];
	const labelAnswerB = document.getElementById('label-answer_B');
	labelAnswerB.innerHTML = questionObject.answers[variants[1]];
	const labelAnswerC = document.getElementById('label-answer_C');
	labelAnswerC.innerHTML = questionObject.answers[variants[2]];
	const labelAnswerD = document.getElementById('label-answer_D');
	labelAnswerD.innerHTML = questionObject.answers[variants[3]];
	headerQuestion.innerHTML = questionObject.question;
}

dodałem to:

let pointsCounter = 0;

i to:

sessionStorage.setItem('lastAnswersIndices', pointsCounter);

Przypisujesz hasłu lastAnswersIndices dwa razy pod rząd wartość. Nie ma to sensu – podczas drugiego przypisywania wartość poprzednio przypisana zostaje usunięta. Hasło lastAnswersIndices powinno zawierać, zgodnie z nazwą, indeksy tych odpowiedzi, które zostały wyświetlone użytkownikowi jako ostatnie (po prawdzie ta nazwa nie jest najlepsza, jeśli chodzi o gramatykę angielską, ale to nie jest ważne w tej chwili).

Proponuję, byś w celu zapisania liczby punktów w sessionStorage stworzył nowe hasło, najlepiej o takiej samej nazwie jak obecna już w kodzie zmienna tymczasowa przechowująca liczbę punktów.

Możesz spojrzeć https://jsfiddle.net/a5p1hxd2/? Na razie na samą funkcje showRandomQuestion. Dodałem tam nowy warunek.

Powiedz tylko czy odnośnie tego o czym mówisz tutaj jedna zmienna, przechowująca stan licznika, czyli ile punktów jest aktualnie; powinna być umieszczona w sessionStorage; powinna być tylko jedna linijka czy powinien być warunek. I co w tym warunku powinienem napisać.

Dodałem ten warunek:

	if (sessionStorage.getItem('pointsCounter') === null) {
		pointsCounter = getRandomQuestion(quizArr);
		sessionStorage.setItem('pointsCounter', pointsCounter);
	}

odnośnie tego co piszesz tutaj

jedna zmienna, przechowująca stan licznika, czyli ile punktów jest aktualnie; powinna być umieszczona w sessionStorage;

Chce tylko wiedzieć czy to powinno być w warunku czy raczej w pojedynczej linijce sessionStorage.getItem('pointsCounter'). Nie wiem bo być może w tym kodzie wystarczy jedna ta wersja sessionStorage.getItem('pointsCounter') ale być może trzeba będzie stworzyć warunek w którym trzeba będzie coś zawrzeć?