Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Тест на Javascript (https://javascript.ru/forum/dom-window/56656-test-na-javascript.html)

LoolGram 27.06.2015 11:43
Тест на Javascript
 
Здравствуйте.
Прощу помощи, в реализации такой вот задачи. Надо создать тест, используя ComboBox. При нажатие на кнопку проверялись ответы, и в третий столбец отображать их состояние верно или неверно используя картинку.

http://jsbin.com/bexacugeko/edit?html,js,output

Заранее спасибо).:)

рони 27.06.2015 13:06
LoolGram,
id уникально :cray:

LoolGram 27.06.2015 13:18
рони,
Простите не понял.

рони 27.06.2015 13:23
LoolGram,
id на странице не должно повторятся, иначе используют общий класс

LoolGram 27.06.2015 13:24
рони,
А понял, спасибо.

рони 27.06.2015 13:43
LoolGram,
в чём именно трудность? и какие ответы будут верными?

LoolGram 27.06.2015 13:47
рони,
Ответы: 1- ай; 2-эй; 3-ой;
Совсем недавно начал изучать js.

рони 27.06.2015 14:07
LoolGram,
написать функцию которая по клику будет обходить в цикле строки таблицы и собирать нужные данные

LoolGram 27.06.2015 14:41
рони,
а так он сможет брать данные из ComboBox?

рони 27.06.2015 14:46
LoolGram,
да

LoolGram 27.06.2015 14:53
рони,
Хорошо,а вы можете показать как это реализовать?

рони 27.06.2015 15:48
тест правильности выбора селекторов
 
LoolGram,
но как вы обьясните этот код преподавателю ? :-? 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>

  </script>
</head>
<body>
  <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678069-sign-error-32.png">
   <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-32.png">
 <form name="quiz" >
                    <table id="table" style="font-size: 24px;">
                        <tr>
                            <td>а | аа </td>
                            <td>
                                <select name="q1" class="ComboBox">
                                        <option value="">Выберите</option>
                                        <option value="1">ой</option>
                                        <option value="2">ай</option>
                                        <option value="3">эй</option>
                                        <option value="4">уй</option>
                                        <option value="5">ы</option>
                                        <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                        <tr>
                            <td>э | ээ</td>
                            <td>
                                <select name="q2" class="ComboBox">
                                    <option value="">Выберите</option>
                                    <option value="1">ой</option>
                                    <option value="2">ай</option>
                                    <option value="3">эй</option>
                                    <option value="4">уй</option>
                                    <option value="5">ы</option>
                                    <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                        <tr>
                            <td> о | оо</td>
                            <td>
                                <select name="q3" class="ComboBox">
                                    <option value="">Выберите</option>
                                    <option value="1">ой</option>
                                    <option value="2">ай</option>
                                    <option value="3">эй</option>
                                    <option value="4">уй</option>
                                    <option value="5">ы</option>
                                    <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                               </table>

                    <input type="submit" value="Проверить" >

</form>
<script>
function fn(event) {
    event.preventDefault();
    var trs = this.querySelectorAll("tr");
    [].forEach.call(trs, function(el) {
        var text = el.cells[0].textContent.replace(/\s+/g, ""),
            box = el.querySelector(".ComboBox"),
            i = box.selectedIndex || 0,
            img = el.querySelector("img");
        i = box.options[i].text;
        text = new RegExp("(" + text + ")", "i");
        text = text.test(i);
        img.src = "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/" + (text ? "678134-sign-check-32.png" : "678069-sign-error-32.png")
    })
};

document.forms.quiz.addEventListener( "submit" , fn, false);
</script>
</body>
</html>

LoolGram 27.06.2015 16:09
рони,
Спасибо, а как сделать так что бы здесь тоже работало ваше решение, ответ "ы" 
<tr>
                            <td>и | ии</td>
                            <td>
                                <select name="q5" class="ComboBox">
                                    <option value="">Выберите</option>
                                    <option value="1">ой</option>
                                    <option value="2">ай</option>
                                    <option value="3">эй</option>
                                    <option value="4">уй</option>
                                    <option value="5">ы</option>
                                    <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height=32px width=32px>
                            </td>
                        </tr>

рони 27.06.2015 16:28
Цитата:
Сообщение от LoolGram
ответ "ы"
где логика?

ответ ий а не ы

LoolGram 27.06.2015 16:43
рони,
Такое правило, это в Бурятском языке.

рони 27.06.2015 16:51
LoolGram,
а можно нужному ответу ставить value определённое? тогда половину кода можно убрать

рони 27.06.2015 16:55
LoolGram,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>

  </script>
</head>
<body>
  <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678069-sign-error-32.png">
   <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-32.png">
 <form name="quiz" >
                    <table id="table" style="font-size: 24px;">
                        <tr>
                            <td>а | аа </td>
                            <td>
                                <select name="q1" class="ComboBox">
                                        <option value="">Выберите</option>
                                        <option value="1">ой</option>
                                        <option value="2015">ай</option>
                                        <option value="3">эй</option>
                                        <option value="4">уй</option>
                                        <option value="5">ы</option>
                                        <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                        <tr>
                            <td>э | ээ</td>
                            <td>
                                <select name="q2" class="ComboBox">
                                    <option value="">Выберите</option>
                                    <option value="1">ой</option>
                                    <option value="2">ай</option>
                                    <option value="2015">эй</option>
                                    <option value="4">уй</option>
                                    <option value="5">ы</option>
                                    <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                        <tr>
                            <td> о | оо</td>
                            <td>
                                <select name="q3" class="ComboBox">
                                    <option value="">Выберите</option>
                                    <option value="2015">ой</option>
                                    <option value="2">ай</option>
                                    <option value="3">эй</option>
                                    <option value="4">уй</option>
                                    <option value="5">ы</option>
                                    <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                        <tr>
                            <td> и | ии</td>
                            <td>
                                <select name="q3" class="ComboBox">
                                    <option value="">Выберите</option>
                                    <option value="1">ой</option>
                                    <option value="2">ай</option>
                                    <option value="3">эй</option>
                                    <option value="4">уй</option>
                                    <option value="2015">ы</option>
                                    <option value="6">үй</option>
                                </select>
                            </td>
                            <td>
                                <img height= 32px width=32px>
                            </td>
                        </tr>
                               </table>

                    <input type="submit" value="Проверить" >

</form>
<script>
function fn(event) {
    event.preventDefault();
    var trs = this.querySelectorAll("tr");
    [].forEach.call(trs, function(el) {
        var val = el.querySelector(".ComboBox").value,
            img = el.querySelector("img");
            img.src = "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/" + (val == "2015" ? "678134-sign-check-32.png" : "678069-sign-error-32.png")
    })
};

document.forms.quiz.addEventListener( "submit" , fn, false);
</script>
</body>
</html>

LoolGram 27.06.2015 17:09
рони,
Спасибо большое


Часовой пояс GMT +3, время: 23:55.