Jak sprawdzić, która odpowiedź została zaznaczona i sprawdzić ją z odpowiedzią z JSON-a?

0

https://jsfiddle.net/k3h5esLp/


    <div class="container"></div>
    
    <button type="button" class="mainBtn">Submit</button>


const container = document.querySelector('.container');
const mainBtn = document.querySelector('.mainBtn');


document.addEventListener('DOMContentLoaded', getData('https://api.myjson.com/bins/dgkjf'));

function getData(url) {
    
    const ajax = new XMLHttpRequest();
    ajax.open('GET', url, true);

    ajax.onload = function() {
        if(this.status === 200) {
            const data = JSON.parse(this.responseText);

            data.quiz.forEach(function(cur, index) {
                const div = document.createElement('div');
                div.classList.add('box');
                div.innerHTML = `            <form>
                <p class="question">${data.quiz[index].question}</p>
                <div class="answer-box">
                    <input type="radio" name="answer" value="a"> <span class="answer">${data.quiz[index].options[0].content}</span>
                </div>
                <div class="answer-box">
                    <input type="radio" name="answer" value="b"> <span class="answer">${data.quiz[index].options[1].content}</span>
                </div>
                <div class="answer-box">
                    <input type="radio" name="answer" value="c"> <span class="answer">${data.quiz[index].options[2].content}</span>
                </div>
                <div class="answer-box">
                    <input type="radio" name="answer" value="d"> <span class="answer">${data.quiz[index].options[3].content}</span>
                </div>
                </form>`;
        
                container.appendChild(div);
            });
        }
        else {
            ajax.onerror();
        }
    };

    ajax.onerror = function() {
        console.log('There was a mistake!');
    }

    ajax.send();
}


{
    "quiz": [

        {
            "id": 1, "question": "Question 1?",
            "options": [
                {"id": "a", "content": "Answer 1."},
                {"id": "b", "content": "Answer 2."},
                {"id": "c", "content": "Answer 3."},
                {"id": "d", "content": "Answer 4."}
            ],
            "answer": "d"
        },
        {
            "id": 2, "question": "Question Question 2?",
            "options": [
                {"id": "a", "content": "Answer Answer 1."},
                {"id": "b", "content": "Answer Answer 2."},
                {"id": "c", "content": "Answer Answer 3."},
                {"id": "d", "content": "Answer Answer 4."}
            ],
            "answer": "c"
        },
        {
            "id": 3, "question": "Question Question Question 3?",
            "options": [
                {"id": "a", "content": "Answer Answer Answer 1."},
                {"id": "b", "content": "Answer Answer Answer 2."},
                {"id": "c", "content": "Answer Answer Answer 3."},
                {"id": "d", "content": "Answer Answer Answer 4."}
            ],
            "answer": "a"
        }    

    ]

}
3

Prośba - umieść swój kod na http://jsfiddle.net i podeślij link do działającej wersji. Znacznie ułatwi to możliwość udzielenia Ci pomocy.

0

Wiem, że mniej więcej tak mogę wyciągnąć wartości, które zostały zaznaczone i je z czymś porównać ale jak je porównać z tym co jest w JSON-ie...


mainBtn.addEventListener('click', checkAnswers);

function checkAnswers() {
    const radios = document.getElementsByName('answer');

    radios.forEach(function(cur, index) {
        if(cur.checked) {
            let val = cur.value;
            console.log(val);

            if(val === 'd') {
                console.log('correct');
            }
        }
        
    });
     
}

2
<body style="background: darkolivegreen;">


<div class="container"></div>

<button type="button" class="mainBtn">Submit</button>
const container = document.querySelector('.container');
const mainBtn = document.querySelector('.mainBtn');

function xxx(address1) {

  return new Promise((resolve, reject) => {
    getData(address1, resolve, reject);
  });

}


xxx('https://api.myjson.com/bins/dgkjf').then((data1) => {
  const answers = ['a','b','c','d'];


  mainBtn.addEventListener('click', function() {
    for(let j=0;j<3;j++) {
      for(let i=1;i<5;i++) {
 

      let x = document.querySelectorAll('form')[j].children[i].children[0];
  
      if(x.checked && answers[i-1] == data1.quiz[j].answer) {
        console.log('correct');
      }

      }
    }
  }, false);
}).catch((err) => { alert(err); });


function getData(url, ret_resolve, ret_reject) {

    const ajax = new XMLHttpRequest();
    ajax.open('GET', url, true);

    ajax.onload = function() {
        if(this.status === 200) {
            const data = JSON.parse(this.responseText);
            
            data.quiz.forEach(function(cur, index) {
                const div = document.createElement('div');
                div.classList.add('box');
                div.innerHTML = `            <form>
                <p class="question">${data.quiz[index].question}</p>
                <div class="answer-box">
                    <input type="radio" name="answer" value="a"> <span class="answer">${data.quiz[index].options[0].content}</span>
                </div>
                <div class="answer-box">
                    <input type="radio" name="answer" value="b"> <span class="answer">${data.quiz[index].options[1].content}</span>
                </div>
                <div class="answer-box">
                    <input type="radio" name="answer" value="c"> <span class="answer">${data.quiz[index].options[2].content}</span>
                </div>
                <div class="answer-box">
                    <input type="radio" name="answer" value="d"> <span class="answer">${data.quiz[index].options[3].content}</span>
                </div>
                </form>`;

                container.appendChild(div);
            });
            ret_resolve(data);
        }
        else {
            ret_reject(new Error(this.statusText));
            ajax.onerror();
        }
    };

    ajax.onerror = function() {
        console.log('There was a mistake!');
    }

    ajax.send();
}
</body>

Przy pisaniu Promise, kawałek kodu przekształciłem z tej strony devenv.pl.

@kult, dziękuję za zwrócenie słusznej uwagi, już zedytowałem linię i napisałem tak /* ... */.catch((err) => { alert(err); });

3

@Neutral: w przypadku odpowiedzi z serwera innej niż 200 ten promise leci w kosmos.
@Śniący zacznij od nauki JS bo przyzwyczaić się do złego jest łatwo, a wyjść dużo ciężej.

Ten kod powinien wyglądać mniej więcej tak:

const makeRequest = (url, method) => {

	var request = new XMLHttpRequest();

	return new Promise((resolve, reject) => {

		request.onreadystatechange = () => {

			// reqeqst musi być kompletny
			if (request.readyState !== 4) return;

			if (request.status >= 200 && request.status < 300) {
				// Sukces
				resolve(request);
			} else {
				// błąd
				reject({
					status: request.status,
					statusText: request.statusText
				});
			}

		};

		request.open(method || 'GET', url, true);

		request.send();

	});
};


const getData = async (url) => {
    try {
        const { responseText } await makeRequest('https://api.myjson.com/bins/dgkjf');
        const responseJson = Json.parse(responseText);

        //tu operujesz na obiekcie
        
    } catch (e) {
        console.error('Error at: ', e);
    }
}

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