Опыт Одного Javascript

2019-04-17 18:23
bga68comp: (Default)
[personal profile] bga68comp
Название записи захотелось написать именно со всех заглавных букв.
По сути... это опыт написания одного задания с использованием языка Javascript, который потребовал некоторого времени на то, чтобы вспомнить и разобраться снова с синтаксисом, почувствовать себя веб-программистом...

© Сразу хочу сказать огромное спасибо тем, кто помог вспомнить или подсказал интересный вариант решения задачки, написав функции.


Пришлось вспомнить свой опыт веб-программирования сайтов прошлого столетия
Казалось бы, простая задача - нужно "оживить" страничку и вывод информации сделать интерактивным.
Сколько сейчас разных редакторов веб-разработки существует, а тяга к ручному написанию кода HTML с использованием таких инструментов как динамические стили или Java-скрипты осталась.

Это, наверное, неистребимо, как командные консоли управления на Cisco хотя уже давно появился веб-интерфейс

Итак, задача:
  1. На приветственной странице кроме поясняющей записи должна быть кнопка СТАРТ.
  2. После нажатия кнопки СТАРТ должна быть выведена таблица с одним вопросом и несколькими кнопками ответов.
  3. После нажатия кнопки ответа должен быть скрыт 1-й вопрос и выведен следующий. Пусть всего вопросов - 15.
  4. Каждая кнопка ответа имеет свой вес. В количественном выражении это может выглядеть так, например: 0, 2 или 8. Все зависит от важности вопроса. Данные по важности предоставляет заказчик.
  5. После нажатия каждой кнопки с ответом нужно "вес" ответа записать в специальную переменную.
  6. После завершения вывода вопросов и ответа на них пользователем нужно посчитать "вес" каждого ответа в отдельных переменных. Номера вопросов распределены между переменными заказчиком.
  7. Необходимо в качестве ответа на вопросы вывести таблицу с посчитанными переменными и текстом объяснений.

Начнем.
Пишем стандартную страницу:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Тест по шкале </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta content="Author FIO" name="Author" />
</HEAD>
<BODY>
<p>

</BODY>
</HTML>


Добавляем видимость-невидимость элементов таблиц через стили:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Тест по шкале </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta content="Author FIO" name="Author" />

<style>
table{
display: none;
}

.shown{
display: inline-table;
}
</style>

</HEAD>
<BODY>
<p>

</BODY>
</HTML>


Создаем функцию, которая будет отображать первую таблицу с кнопкой старт:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Тест по шкале </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta content="Author FIO" name="Author" />

<style>
table{
display: none;
}

.shown{
display: inline-table;
}
</style>

<script>
var variable6 = 0; // переменная для невидимой 1-й таблицы с кнопкой Старт

function on17QuestionAnswered(target){ // функция для события onClick
variable6 += parseInt(target.getAttribute('cost'));
var thisQuestion = document.getElementById('question_17'); // переменная для включения видимости таблицы с кнопкой Старт. 17 = 15 вопросов + ответы + 1
var nextQuestion = document.getElementById('question_1');  // переменная для включения по нажатию кнопки таблицы с 1-м вопросом

thisQuestion.classList.remove('shown');
nextQuestion.classList.add('shown');

updateVariable6(variable6);
}
</script>


</HEAD>
<BODY>
<p>

</BODY>
</HTML>


Точно также аналогично создаем функции, которые будут отображать 2-ю, 3-ю и ... так до последней 16-й таблицы. "16-й" - потому, что всего по условию у нас 15 таблиц с отдельными вопросами + таблица с ответами и 1-я "видимая" таблица с объяснением действий и кнопкой СТАРТ. Приступаем к наполнению контента в теге <BODY>:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Тест по шкале </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta content="Author FIO" name="Author" />

<style>
table{
display: none;
}

.shown{
display: inline-table;
}
</style>

<script>
var variable6 = 0; // переменная для видимой 1-й таблицы с кнопкой Старт

function on17QuestionAnswered(target){ // функция для события onClick
variable6 += parseInt(target.getAttribute('cost'));
var thisQuestion = document.getElementById('question_17'); // переменная для включения видимости таблицы с кнопкой Старт. 17 = 15 вопросов + ответы + 1
var nextQuestion = document.getElementById('question_1');  // переменная для включения по нажатию кнопки таблицы с 1-м вопросом

thisQuestion.classList.remove('shown');
nextQuestion.classList.add('shown');

updateVariable6(variable6);
}
var variable1 = 0; // переменная для невидимой 1-й таблицы с 1-м вопросом

function on1QuestionAnswered(target){ // функция для события onClick и для 1-го вопроса
variable1 += parseInt(target.getAttribute('cost'));
var thisQuestion = document.getElementById('question_1'); // переменная для включения по нажатию кнопки видимости таблицы с 1-м вопросом
var nextQuestion = document.getElementById('question_2');  // переменная для включения по нажатию кнопки видимости таблицы со 2-м вопросом

thisQuestion.classList.remove('shown');
nextQuestion.classList.add('shown');

updateVariable1(variable1); // записываем значение нажатой кнопки в переменную Variable1
}

</script>

</HEAD>
<BODY>

<center><p style="font-size: 26pt;"><b>Добрый день!</b></p>

<table class="shown" style="border-collapse: collapse; border-color: rgb(255, 255, 255); border-style: solid; border-width: 0px; border-spacing: 0;" width=90%>
<tr style="border-color: rgb(255, 255, 255); border-style: solid; border-width: 0px; border-spacing: 0;">
<td style="border-color: rgb(255, 255, 255); border-style: solid; border-width: 0px; border-spacing: 0; padding: 15px;">
<p style="font-size: 12pt;">Ниже Вам предложены несколько утверждений</p>
<p style="font-size: 12pt; text-align: justify;">В зависимости от Вашего желания выберите <b>один</b> из ответов и нажмите соответствующую кнопку "Да"</p>
<p style="font-size: 12pt;">Для начала прохождения теста нажмите кнопку <b>Старт</b>:
</p>
</td>
</tr>
</table></center>
// параметр class="shown" включает видимость таблицы
<center>
<!-- 0 --><table id="question_17" class="shown" style="border-collapse: collapse; border-color:# 0078d7; border-style: solid; border-width: 0px; border-spacing: 0;" width="90%">
<tr style="border-color:# 0078d7; border-style: solid; border-width: 0px; border-spacing: 0;">

<td style="border-color:# 0078d7; border-style: solid; border-width: 0px; border-spacing: 0; text-align: center;">
<input type="button" name="b171" value=" СТАРТ " cost="0"> </td>

</tr>
</table>// закрываем таблицу с кнопкой СТАРТ и создаем таблицу для 1-го вопроса:
<!-- 1 --><table id="question_1" style="border-collapse: collapse; border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0;" width="90%">
<tr style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0;">
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;" width="50%"> </td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">Ответ 1</td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">Ответ 2</td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">Ответ 3</td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">Ответ 4</td>
</tr> // закрываем строку с заголовками и открываем строку с вопросами и ответами:
<tr style= "border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0;">
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; vertical-align: middle;" width="50%"><ol><li value="1">Первый вопрос - первой таблицы</li></ol></td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">
<input type="button" name="b11" value="Да" cost="0" onclick="on1QuestionAnswered(this)"> </td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">
<input type="button" name="b12" value="Да" cost="2" onclick="on1QuestionAnswered(this)"> </td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">
<input type="button" name="b13" value="Да" cost="5" onclick="on1QuestionAnswered(this)"> </td>
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0; text-align: center;">
<input type="button" name="b14" value="Да" cost="7" onclick="on1QuestionAnswered(this)"> </td>
</tr>
</table>
</center>

</BODY>
</HTML>


По аналогии с таблицей <!-- 1 --> и id="question_1" создаем таблицы для 2-го, 3-го ... и т.д. вопросов.
Это, скорее всего, не вызовет трудности.

Последней создаем таблицу с ответами теста и выводим значения переменных, которые считали по нажатию клавиш.


<center>
<table id="question_16" style="border-collapse: collapse; border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0;" width="90%">
<tr>
<th>Результат (в баллах):</th>
</tr>
<tr style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0;">
<td style="border-color:# 0078d7; border-style: solid; border-width: 1px; border-spacing: 0;">
  <div style="margin-left: 40px; text-align: justify;">
<p><span> A </span><span style="margin-left: 30px;"> - первая переменная: </span> <span id="variable_1"> </span><!-- входят ответы по вопросам: 1.2.4.6 --> </p>
<p><span> B </span><span style="margin-left: 30px;"> - вторая переменная: </span> <span id="variable_2"> </span><!-- входят ответы по вопросам: 8.13.14 --> </p>
<p><span> C </span><span style="margin-left: 30px;"> - третья переменная: </span> <span id="variable_3"> </span><!-- входят ответы по вопросам: 7.9.12 --> </p>
<p><span> D </span><span style="margin-left: 30px;"> - четвертая переменная: </span> <span id="variable_4"> </span><!-- входят ответы по вопросам: 3.5.15 --> </p>
<p><span> E </span><span style="margin-left: 30px;"> - пятая переменная: </span> <span id="variable_5"> </span><!-- входят ответы по вопросам: 10.11 --> </p>
 </div>
</td>
</tr>
</table>
</center>


Примечание

Для того, чтобы значение переменной было выведено в вышеприведенном тексте (код вверху для таблицы - Результат в баллах), необходима маааленькая тонкость. В нижеприведенном тексте кода вместо *** нужно поставить пробел. Именно вместо этого пробела и будет вписана цифра переменной:

<span id="variable_1">***</span>


Закрываем тегами <BODY> и <HTML>:


</BODY>
</HTML>


Все.

Использовались следующие стили:
зеленый <span style="color: rgb(97, 128, 0);">
фиолетовый значение style <span style="color: rgb(128, 0, 255);"> # 8000ff;
красный id <span style="color: rgb(255, 0, 0);"> # ff0000;
сиреневый <span style="background-color: rgb(242, 244, 255);">
серый <span style="background-color: rgb(247, 245, 245);">
серый темный на сиреневом <span style="color: rgb(128, 128, 128);">'cost'</span>
оранжевый значение переменной <span style="color: rgb(255, 98, 0);">
белый background <div style="margin-left: 10px; background-color: rgb(255, 255, 255);">
синий <span style="color: rgb(0, 0, 255);">
синий переменные <span style="color: rgb(0, 0, 128);">




Перейти на титульную страницу: https://bga68.livejournal.com/
Tags:
  • Add Memory
  • Share This Entry

Profile

bga68comp: (Default)
bga68comp

December 2025

S M T W T F S
  12 3 456
7891011 1213
14151617181920
21222324252627
28293031   

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated 2026-01-01 20:33
Powered by Dreamwidth Studios