W jaki sposób wyświetlać jedno pytanie na stronie?

pytanie zadane 31 marca 2019 w HTML i CSS przez Chayton89 Nowicjusz (120 p.)

<!DOCTYPE html>
<head>
<title> ćwiczenie </title>
<meta charset="utf-8">
</head>
<body>
<div id="Pytanie1">
<p> Czy dzisiaj jest fajna pogoda? </p>
<label><input type="radio" name="1pytanie" value="Właśnie tak"> Właśnie tak </label><br>
<label><input type="radio" name="1pytanie" value="Chyba tak"> Chyba tak </label><br>
<label><input type="radio" name="1pytanie" value="Właśnie, że nie"> Właśnie, że nie </label><br>
<label><input type="radio" name="1pytanie" value="Chyba nie"> Chyba nie </label><br>
</div>
<input type="button" value="dalej" onClick="dalej">
</body>
</html>

Witam, dostałem zadanie z programowania. Mam napisać stronę, która będzie egzaminem online, jednak nie mam pojęcia w jaki sposób napisać to tak, żeby na stronie wyświetlało się jedno pytanie, a dopiero po wciśnięciu przycisku "Dalej" wyświetlało się kolejne itd. Nie potrzebuję opcji wracania do pytania, ponieważ ma być to napisane w sposób jednokrotnego wyboru bez możliwości powrotu do poprzedniego pytania.

2 odpowiedzi

odpowiedź 1 kwietnia 2019 przez Chess Szeryf (76,710 p.)
edycja 1 kwietnia 2019 przez Chess

div:target {
	background: yellow;
}
fieldset {
	display: none;
}
#result {
	white-space: pre-wrap;
}

<body style="background: darkolivegreen;">

<form method="post" action="" class="multiple_form toggle_to">
	<fieldset>
		<legend>How looks grass (color)?</legend>
		<input type="radio" name="x1" value="green" />green
		<input type="radio" name="x1" value="yellow" />yellow
		<input type="radio" name="x1" value="brown" />brown
	</fieldset>
	<fieldset>
		<legend>RBM - what's mean?</legend>
		<input type="radio" name="x2" value="Risk Beta Mask" />Risk Beta Mask
		<input type="radio" name="x2" value="Row Brown Move" />Row Brown Move
		<input type="radio" name="x2" value="Right Button Mouse" />Right Button Mouse
	</fieldset>
	<fieldset>
		<legend>What's river?</legend>
		<input type="radio" name="x3" value="ocean" />ocean
		<input type="radio" name="x3" value="rzeka" />rzeka
		<input type="radio" name="x3" value="strumyk" />strumyk
	</fieldset>
	<button id="next">Next</button>
	<button id="reset">Reset</button>
</form>


<div id="result"></div>

const one1 = document.getElementsByTagName('fieldset');
const el_next = document.querySelectorAll('#next, fieldset');

const correct_answers = ["green", "Right Button Mouse", "rzeka", 2, 2, 2, 1, 0];

var current_question = 0;
var current_question2 = current_question;
var arr = [];
var radio_last_checked;
var points = 0;

one1[current_question].style.display = 'block';


el_next.forEach((f) => {
	f.onclick = (e) => {
		
		if(e.target.tagName == 'INPUT') {
			radio_last_checked = e.target.value;
		}
		
		if(e.target.tagName == 'BUTTON') {
			e.preventDefault();
		}
		
		if(e.target.tagName == 'BUTTON' && current_question < one1.length) {
			
			
			current_question++;
			
			current_question2 = current_question - 1;
			
			if(current_question2 < one1.length - 1) {
				current_question2++;
				one1[current_question2].style.display = 'block';
				one1[current_question2-1].style.display = 'none';
			}
			
			if(correct_answers[current_question-1] == radio_last_checked) {
				arr[current_question-1] = true;
			} else {
				arr[current_question-1] = false;
			}
			
			if(current_question == one1.length-1) {
				document.getElementById('next').textContent = 'Finish';
			}
			
			if(current_question == one1.length) {
				
				arr.forEach(function(x, index) {
					points += x === true ? 1 : 0;
					document.getElementById('result').textContent += ('correct answer: ' + index + ': ' + x + '.\r\n');
				});	
				document.getElementById('result').textContent += points;
			}

		}

	}

});

const reset1 = document.getElementById('reset');

reset1.onclick = function(e) {
	e.preventDefault();
	current_question = 0;
	one1[current_question2].style.display = 'none';
	one1[current_question].style.display = 'block';
	current_question2 = 0;
	document.getElementById('next').textContent = 'Next';
	document.getElementById('result').textContent = '';
	points = 0;
	[...document.getElementsByTagName('fieldset')].forEach((x) => {
		[...x.children].forEach((y) => {
			y.checked = false;
		});
	});
	
}

</body>

https://gist.github.com/rsutphin/5157757

odpowiedź 1 kwietnia 2019 przez olekjs Gaduła (4,540 p.)

A więc zrób to za pomocą JS

komentarz 1 kwietnia 2019 przez Chayton89 Nowicjusz (120 p.)

Gdybym wiedział w jaki sposób to zrobić, to nie pytałbym o to na forum. Problem polega na tym, że nie wiem jakim poleceniem to zrobić i jak to ma być napisane.