Форум

saves7 · #1 (**permalink**) 20.11.2015, 16:21

Добрый день, нужен код, который подсчитывает правильные ответы. Ответы вводятся радиокнопкой и областью ввода. Смотрите скриншот и html код. Код должен быть простым и без использования jQuery и т.п. Оплата 500 рублей.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#wrapper {
		margin: 0 auto;
		font:16px Arial;
		}
		#cont {
		background: #aaffdd;
		width: 500px;
		height: 1200px;
		font:16px Arial;
		
		}
		#radio {
		width: 50px;
		float: left;
		}
		
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="cont">
		Выберите цифру, которая должна продолжить ряд. <br>
		
		<pre> 1   2   3   4   5   ? </pre>
		<br>
		<pre> 7    8    9    5     6    2</pre>
			<div id="radio">
				<input type="radio" value="one"/>
			</div>
			<div id="radio">
				<input type="radio" value="two"/>
			</div>
			<div id="radio">
				<input type="radio" value="two"/>
			</div>
			<div id="radio">
				<input type="radio" value="two"/>
			</div>
			<div id="radio">
				<input type="radio" value="two"/>
			</div>
			<div id="radio">
				<input type="radio" value="two"/>
			</div>
			<br><br>
			(ответ 6)
			
			<br><br>
			<hr>
			Вставьте слово, которое служило бы окончанием первого слова и началом второго.<br>
										ME ( . . . ) ОЛАД
			<br><br>
			<input type="text" maxlengh="3"> <br>
			(ответ шок) 
			<br><br>
			<hr>
			Вставьте недостающее число.

			<pre>16  (27)  43</pre>

			<pre>29  (  )  56</pre>
			<br>
			
			<input type="text"> <br>
			(ответ 27)
			<br><br>
			<hr>
                         <br>
			<br>
			<input type="button" value="Подсчитать баллы"/>
			<br><br>
			Колличество правильных ответов: <br>
			<input type="text"> из 3
		</div>
		
	</div>
</body>
</html>

Decode · #2 (**permalink**) 20.11.2015, 17:50

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #wrapper {
            margin: 0 auto;
            font:16px Arial;
        }
        #cont {
            background: #aaffdd;
            width: 500px;
            font:16px Arial;

        }
        .radio {
            width: 50px;
            float: left;
        }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id="cont">
            Выберите цифру, которая должна продолжить ряд. <br>

            <pre> 1   2   3   4   5   ? </pre>
            <br>
            <pre> 7    8    9    5     6    2</pre>
            <div class="radio">
                <input type="radio" value="7"/>
            </div>
            <div class="radio">
                <input type="radio" value="8"/>
            </div>
            <div class="radio">
                <input type="radio" value="9"/>
            </div>
            <div class="radio">
                <input type="radio" value="5"/>
            </div>
            <div class="radio">
                <input type="radio" value="6"/>
            </div>
            <div class="radio">
                <input type="radio" value="2"/>
            </div>
            <br><br>
            (ответ <span>6</span>)

            <br><br>
            <hr>
            Вставьте слово, которое служило бы окончанием первого слова и началом второго.<br>
            ME ( . . . ) ОЛАД
            <br><br>
            <input type="text" maxlengh="3" id="word"> <br>
            (ответ шок)
            <br><br>
            <hr>
            Вставьте недостающее число.

            <pre>16  (27)  43</pre>

            <pre>29  (  )  56</pre>
            <br>

            <input type="text" id="missing-number"> <br>
            (ответ 27)
            <br><br>
            <hr>
            Колличество правильных ответов: <br>
            <input type="text" id="correct-answers" value="0"> из 3
        </div>
    </div>

    <script>
        var NUMBER_TO_CONTINUE = 6,
            WORD = 'шок',
            MISSING_NUMBER = 27,
            i = 0;

        document.getElementById('cont').onchange = function(e) {
            var target = e.target;

            target.closest('.radio') && (+target.value == NUMBER_TO_CONTINUE) && i++;

            target.id == 'word' && (target.value == WORD) && i++;

            target.id == 'missing-number' && (+target.value == MISSING_NUMBER) && i++;

            document.getElementById('correct-answers').value = i;
        };
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript