Пропустить навигацию

Практика 6

Задание

  1. Разберите пример Story.html, в котором находится интерактивная история «Приключения студента». Принцип работы данного сценария: в каждой сцене присутствуют два варианта дальнейшего развития событий, каждый раз для перехода к следующей сцене пользователю приходится выбирать один из двух вариантов развития событий в текущей сцене. Содержимое веб-страницы меняется в зависимости от выбора пользователя.
  2. Усовершенствуйте код страницы Story.html следующим образом:
  • Замените вложенные операторы if..else оператором switch..case;
  • Измените способ описания текущей сцены. Необходимо, чтобы описание сцены не появлялось в отдельном окне (alert), а находилось непосредственно на странице (div, getElementById, innerHTML). Для данной задачи подойдет функция replaceNodeText(id, newText), из следующего пункта;
  • Замените кнопки перехода к следующей сцене на HTML-элементы, содержащие текст (span). Реализуйте изменение текста внутри кнопок при переходе к следующей сцене вашей истории (для этого напишите функцию replaceNodeText(id, newText),  которая изменяет текст в узле с указанным ID (removeChild, appendChild, createNodeText)). При наведении на кнопку указателя мыши стиль кнопки должен изменяться (className, onmouseover, onmouseout). Если из некоторых сцен возможен только один переход (например, первая сцена scene0) – то вторая кнопка должна быть скрыта (visibility, hidden, visible);
  • Создайте элемент div с id=”history”, содержащий список сцен, посещённых пользователем по мере продвижения по сюжету (p). Каждая пройденная сцена должна добавляться к истории вместе с решением, которое к ней привело. Пример записи элемента истории:
    decision 1 -> Сцена 2 : “You have arrived at a cute home” (createElement, createTextNode, appendChild).
  1. Создайте свою интерактивную историю (состоящую из 10 и более сцен), реализованную по данному алгоритму.

Исходный код:

файл  Story.html

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>Story</title>
<style type="text/css">
span.decision {
	font-weight:bold;
	border:thin solid #000000;
	padding:5px;
	background-color:#DDDDDD;
}
span.decisionhover {
	font-weight:bold;
	border:thin solid #000000;
	padding:5px;
	background-color:#EEBBEE;
}
</style>
<script type="text/javascript">
		var curScene = 0;

	function changeScene(decision) {
		var message = "";
		if (curScene == 0) {
		  curScene = 1;
		  message = "Your journey begins at a fork in the road";
		}
		else if (curScene == 1) {
		  if (decision == 1) {
		    curScene = 2;
		    message = "You have arrived at a cute home";
		  }
		  else {
		    curScene = 3;
		    message = "You have arrived at the Institute";
		  }
		}
		else if (curScene == 2) {
		  if (decision == 1) {
		    curScene = 0;
		  message = "You has slept all day and story has ended";
		  }
		  else {
		    curScene = 4;
		    message = "To be continued";
		  }
			
		}
		else if (curScene == 3) {
		  if (decision == 1) {
		    curScene = 0;
		  message = "You has studied all day and story has ended";
		  }
		  else {
		    curScene = 4;
		    message = "To be continued";
		  }
		}
	document.getElementById("sceneimg").src = "scene" + curScene + ".png";
	if (message != "") 
          alert(message);
	}
</script>
</head>

<body>
	<div style "margin-top:100px"; text-align:center">
		<img id="sceneimg" src="scene0.png" alt ="Student adventure"/><br>
		Please choose:
		<input type="button" id="decision1" value="1" onclick="changeScene(1)" />
		<input type="button" id="decision2" value="2" onclick="changeScene(2)" />
	</div>
</body>
</html>