Форум

Wilshere · #1 (**permalink**) 15.03.2016, 17:04

Есть тест, созданный через массив с объектами.
Правильные ответы подсвечены зеленым цветом. Нужно, чтобы при клике на кнопку "результат" выводилось кол-во правильных и неправильных ответов. Помогите пж-ста реализовать это через js.

https://jsfiddle.net/gd4zcpxw/

<!doctype html>
<html>	
	<head>
		<title>Test 1</title>
		<meta charset="utf-8">
	</head>
		<body>
			<script>
			
			var voprosi = [ 	
					{vopr: "Сколько лет ...",  otvet: [1, 45, 99, 34], 	pravOtvet: 1},
					{vopr: "Какой вес...", 	otvet: ["100kg", "120kg", "104kg", "110kg"], 	pravOtvet: 2},
						];
			for(var i = 0; i < voprosi.length; i ++){
				var tekushiyVopros = voprosi[i];
				var harciIndex = i + 1; 
				document.write("<p>" + harciIndex + ") " + tekushiyVopros.vopr + "</p>");
			for(var j = 0; j < tekushiyVopros.otvet.length; j ++){
				var patasxaniIndex = j + 1;
				var yntacikPatasxaniGuyn = patasxaniIndex == tekushiyVopros.pravOtvet ? "green" : "red";
				document.write("<p style='color: " + yntacikPatasxaniGuyn + "'>" + patasxaniIndex + ") <input type='radio' name='harc_" + harciIndex + "'>" + tekushiyVopros.otvet[j] + "</p>");
				
				}
				document.write("<br/>")
			}
		</script>
		<input type="submit" value="Проверить" onclick="clic()">
		
	</body>
</html>

Manyasha · #2 (**permalink**) 16.03.2016, 12:34

Wilshere,
так пойдет?

<script>
var voprosi = [ 	
	{vopr: "Сколько лет ...", 		otvet: [1, 45, 99, 34], 						pravOtvet: 1},
	{vopr: "Какой вес...", 	otvet: ["100kg", "120kg", "104kg", "110kg"], 	pravOtvet: 2},
];
function creatQuestions(){
  var mainForm = document.getElementById('myform');
  for(var i = 0; i < voprosi.length; i ++){
    var harciIndex = i + 1; 
    var elemQues = document.createElement('p');
    elemQues.innerHTML = harciIndex + ") " + voprosi[i].vopr;
    mainForm.insertBefore(elemQues, btn); 
    for(var j = 0; j < voprosi[i].otvet.length; j ++){
      var patasxaniIndex = j + 1;
      var yntacikPatasxaniGuyn = patasxaniIndex == voprosi[i].pravOtvet ? "green" : "red";
      var elemAnsw = document.createElement('p');
      elemAnsw.style.color = yntacikPatasxaniGuyn;
      mainForm.insertBefore(elemAnsw, btn);
      elemAnsw.innerHTML = patasxaniIndex + ")";
      var elemRadio = document.createElement('input');
      elemRadio.type = 'radio';
      elemRadio.name = 'q' + harciIndex;
      elemRadio.id = 'q' + harciIndex + '_' + patasxaniIndex;
      elemRadio.value = j+1;
      var elemLabel = document.createElement('label');
      elemLabel.innerHTML = voprosi[i].otvet[j];
      elemAnsw.appendChild(elemRadio); 
      elemAnsw.appendChild(elemLabel);   
    }
  }
}

function btnClick(){
	var sum =0;
  for(var i = 1; i <= voprosi.length; i ++){
    for(var j = 1; j <= voprosi[i-1].otvet.length; j ++){
      answName = "q" + i + "_" + j;
      x = document.getElementById(answName);
      if (x.checked == true && x.value == voprosi[i-1].pravOtvet){
      	sum++;
      }
    }
  }
  alert(sum);
}
</script>
<body onload ='creatQuestions()'>
<form name="myform" id="myform">
 <input type="submit" id = 'btn' value="Проверить" onclick="btnClick(); return false;">
</form>

Форум

Справочник

Discord чат

Курсы javascript