Przypsianie kilku zmiennym wartości z tablicy

0

Ten kod który tutaj jest

const objectName = [
    {
        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' ]
    }
];
for(let i = 0; i < objectName.length; i++){
        for(let j = 0; j < objectName[i][value].length; j++){
            console.log(objectName[i][value][j]);
    }
}

chce wykorzystać do tablic answers w obiekcie quizArr

0

@szatkus:
To jest obecny kod

function showRandomQuestions() {
    do {
        var randomQuestIndex = Math.floor(Math.random() * quizArr.length);
    } while (randomQuestIndex === oldQuestionIndex);
    oldQuestionIndex = randomQuestIndex;
    headerQuestions.innerHTML = quizArr[randomQuestIndex].question;
}
function showAnswersQuiz(answers) {
    let arrAnswerVaranty = [ 'a', 'b', 'c', 'd' ];
    for (const id in arrAnswerVaranty) {
        var displayAnswersVaranty = document.getElementById((arrAnswerVaranty[id].innerHTML = answers[id]));
    }
    return displayAnswersVaranty;
}

kod w funkcji showRandomQuestions zostaje czy go usunąć i wstawić tam wywołanie tej funkcji showAnswersQuiz z tablicą odpowiedzi?

0

Tak to miało wyglądać?


function showRandomQuestions() {
    do {
        var randomQuestIndex = Math.floor(Math.random() * quizArr.length);
    } while (randomQuestIndex === oldQuestionIndex);
    oldQuestionIndex = randomQuestIndex;
    headerQuestions.innerHTML = quizArr[randomQuestIndex].question;
    showAnswersQuiz([ 'Java', 'C', 'Python', 'JS' ]);
    showAnswersQuiz([ 'Florin Pop', 'Joe Biden', 'Ivan Saldano', 'Mihai Andrei' ]);
    showAnswersQuiz([
        'Hypertext Markup Language',
        'Cascading Style Sheet',
        'Jason Object Notation',
        'Helicopters Terminals Motorboats Lamborginis'
    ]);
    showAnswersQuiz([ '1996', '1995', '1994', 'none of the above' ]);
}
function showAnswersQuiz(answers) {
    let arrAnswerVaranty = [ 'a', 'b', 'c', 'd' ];
    for (const id in arrAnswerVaranty) {
        var displayAnswersVaranty = document.getElementById((arrAnswerVaranty[id].innerHTML = answers[id]));
    }
}
0

Dostaje answers is not defined https://jsfiddle.net/esz79bxj/1/

0

Ok błędu już nie ma ale nadal nie wyświetlają się pytania https://jsfiddle.net/L3kujr7b/

1

@piotrek1998

Dobra ok. A nie mogę wykorzystać tego kodu z tymi pętlami. Nie chce od razu korzystać z metod wbudowanych —

no właśnie, jak to zrobić bez sortowania po randomie? Można by to zrobić tak, żeby budować nową tablicę losując za każdym razem indeks elementu. I teraz - żeby się elementy nie powtarzały, to zapamiętywać, które indeksy się powtórzyły. I jeśli dany wylosowany indeks nie wystąpił wcześniej, to spoko, możemy dać push dodając nowy element do naszej nowej tablicy. Jeśli jednak już wystąpił, to zwiększamy o 1 indeks elementu (jak trafimy na koniec tablicy, to lecimy od zera) i lecimy dalej w pętli, aż w końcu natrafimy na puste miejsce i dopiero tam to damy (możemy też użyć dzielenia z resztą index % arr.length, wtedy nie będziemy musieli dawać warunku czy jest koniec tablicy, to 0, bo dzielenie z resztą samo nam to zrobi.

0

@piotrek1998: przepraszam, ale jeśli chodzi o mnie, to ja jednak wrócę do kodu sprzed Twoich ostatnich modyfikacji (acz już implementującego to, co napisałem ostatnio). Nie będę brać pod uwagę ani Twojego ostatniego kodu, ani propozycji @LukeJL oraz @szatkus Inaczej pogubię się. (Jeśli wolisz ich porady, mogę się wycofać, choćby tymczasowo).

Niech naszym kodem wyjściowym będzie teraz poniższy kod:

let oldQuestionIndex = -1;

const btnSubmit = document.querySelector('.btn-submit');

const quizArr = [
    {
        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' ]
    }
];

function showRandomQuestion() {
    getRandomVariants();
}

function getRandomVariants() {}

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

showRandomQuestion();

Zmieniłem nazwę showRandomQuestions na showRandomQuestion w stosunku do Twojego ostatniego kodu (zauważ brak literki s na końcu).

Teraz dobrze, żebyś był pewien, jak ten kod działa:

  1. Po załadowaniu strony dzieją się następujące rzeczy (mniej-więcej w tej kolejności):
    1.1. Deklarowana jest zmienna oldQuestionIndex i przypisywana jest jej liczba -1.
    1.2. Wywoływana jest metoda querySelector obiektu document, a tym samym pobierany jest przycisk (czyli element HTML) o klasie btn-submit. Dalej: deklarowana jest zmienna btnSubmit. Na końcu pobrany przycisk jest przypisywany tej zmiennej.
    1.3. Deklarowana jest zmienna quizArr i przypisywana jest jej tablica z pytaniami.
    1.4. Deklarowana jest funkcja showRandomQuestion.
    1.5. Deklarowana jest funkcja getRandomVariants.
    1.6. Wywoływana jest metoda addEventListener przycisku btnSubmit.
    1.7. Wywoływana jest funkcja showRandomQuestion.
  2. Po wywołaniu metody addEventListener dzieją się następujące rzeczy:
    2.1. Przypisywana jest funkcja anonimowa do zdarzenia click przycisku btnSubmit.
  3. Po kliknięciu przycisku btnSubmit (czyli nadejściu jego zdarzenia click) dzieją się następujące rzeczy:
    3.1. Wywoływana jest funkcja anonimowa przypisana do tego zdarzenia, a tym samym wywoływana jest funkcja showRandomQuestion.
  4. Po wywołaniu funkcji showRandomQuestion dzieją się następujące rzeczy:
    4.1. Wywoływana jest funkcja getRandomVariants.

Powyższy opis działania jest tylko pomocniczy. Nie musisz z niego korzystać w dalszej pracy, choć dobrze, jak będziesz to działanie rozumieć.

Na razie tyle. Żeby nie wszystko naraz, napiszę ciąg dalszy jutro.


@LukeJL , @szatkus – przepraszam, że nie korzystam z Waszego kodu i propozycji.

1

Doprecyzujmy nasze cele. Przypomnę, że oryginalne były takie:

Silv napisał(a):

Mamy dwa cele; można by je nazwać wymaganiami funkcjonalnymi. Czyli:

  1. po załadowaniu strony wyświetlić losowe pytanie;
  2. po naciśnięciu przycisku "Wyślij" wyświetlić losowe pytanie, różne od bieżącego.

Poprzednio zapytałem Cię, czy chciałbyś mieć kolejność odpowiedzi dla danego wyświetlenia danego pytania różną od kolejności odpowiedzi dla poprzedniego wyświetlenia tego pytania. Nie odpowiedziałeś, ale to nic, bo obecnie myślę, że nie jest to najlepsze pytanie; wymagałoby zmiany tablicy quizArr, a tego wolę nie robić, bo za dużo pracy by było naraz. Moim zdaniem po prostu wyświetlajmy odpowiedzi w losowej kolejności. Nie ma to co prawda większego znaczenia – i tak nie będzie tego widać, bo dla każdego pytania są inne odpowiedzi. Ale zróbmy tak, żeby nie komplikować. Zgadzasz się?


PS Przepraszam, że tak to ciągnę, ale to kluczowa rzecz według mnie, a wczoraj nie pomyślałem o tym.

2

Teraz tak:

  1. Trzeba udostępnić w kodzie element HTML, w którym będzie wyświetlane pytanie. To już zrobiłeś w ostatnim swoim kodzie. Tylko więc przekleję:

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

    Moim zdaniem nazwa tej zmiennej i identyfikator tego elementu mogły by być inne. Obecne sugerują, że w tym nagłówku będzie kolekcja pytań, a nie jedno pytanie. Proponowałbym zarówno w identyfikatorze, jak i w nazwie zmiennej usunięcie literki s z końca (pamiętaj o zmianie identyfikatora także w kodzie HTML).

  2. Trzeba udostępnić w kodzie elementy HTML, w których będą wyświetlane odpowiedzi. To też zrobiłeś w ostatnim swoim kodzie. Przekleję:

    const answerA = document.getElementById('a');
    const answerB = document.getElementById('b');
    const answerC = document.getElementById('c');
    const answerD = document.getElementById('d');

    Te zmienne i identyfikatory można by również inaczej nazwać, żeby zachować obecną konwencję, jaką widzę u Ciebie. Proponowałbym poprzedzenie nazwy każdej zmiennej ciągiem label (i oczywiście zmianę litery a na A), oraz poprzedzenie każdego identyfikatora ciągiem label- (zauważ kreskę na końcu; pamiętaj o kodzie HTML).

1

Teraz jest ok https://jsfiddle.net/3muL20rq/. Czy coś musze poprawić jeszcze?

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0