- •Міністерство освіти і науки України Машинобудівний коледж Сумського державного університету Циклова комісія спеціальності 5.05010101
- •Курсовий проект з предмету “ Web-технології та web-дизайн”
- •Дисципліна “Web-технології та web-дизайн”
- •Курс _______________ Група __________________ Семестр ______________ завдання на курсову роботу студента
- •1 Постановка задачі
- •2 Дослідження предметної області
- •3 Структура електронного підручника та схема навігації
- •3.1 Карта сайту
- •4 Сценарії та основні модулі
- •4.1 Головна сторінка
- •4.2 Шаблон web-інтрфейсу
- •4.3 Сторінка з питаннями для самоконтролю
- •4.4 Опис інтерактивних елементів
- •Висновок
- •Література
- •Додаток а
- •Додаток б
- •Додаток в
- •Додаток г
Додаток в
Код обробки для сторінки самоконтролю «1914—1918.html»:
<html>
<head>
<link rel="stylesheet" href="scrollup.css" type="text/css" media="screen">
<script src="scrollup.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="styledmenus.com" />
<title>Всесвітня Історія Е.П.</title>
<link rel="stylesheet" href="drop_gor_menu.css" type="text/css" />
<link rel="icon" href="images/icon.ico" />
</head>
<style>
body {
background: url(images/12.jpg) no-repeat;
-moz-background-size: 20%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
background-position: left, right;
background-repeat: repeat-y, repeat-y;
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
li {
display: inline-block; /* Строчно-блочные элементы */
background: #CA181A; /* Цвет фона */
margin-right: 3px; /* Расстояние между пунктами меню */
-webkit-transform: skewX(-30deg); /* Для Safari и Chrome */
-moz-transform: skewX(-30deg); /* Для Firefox */
-o-transform: skewX(-30deg); /* Для Opera */
-ms-transform: skewX(-30deg); /* Для IE */
transform: skewX(-30deg); /* CSS3 */
}
a {
color: #fff; /* Цвет ссылок */
display: block; /* Блочный элемент */
padding: 5px 15px; /* Поля вокруг текста */
text-decoration: none; /* Убираем подчёркивание */
-webkit-transform: skewX(30deg); /* Для Safari и Chrome */
-moz-transform: skewX(30deg); /* Для Firefox */
-o-transform: skewX(30deg); /* Для Opera */
-ms-transform: skewX(30deg); /* Для IE */
transform: skewX(30deg); /* CSS3 */
body {
background: url(images/12.jpg) no-repeat;
-moz-background-size: 20%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
background-position: left, right;
background-repeat: repeat-y, repeat-y;
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
li {
display: inline-block; /* Строчно-блочные элементы */
background: #CA181A; /* Цвет фона */
margin-right: 3px; /* Расстояние между пунктами меню */
-webkit-transform: skewX(-30deg); /* Для Safari и Chrome */
-moz-transform: skewX(-30deg); /* Для Firefox */
-o-transform: skewX(-30deg); /* Для Opera */
-ms-transform: skewX(-30deg); /* Для IE */
transform: skewX(-30deg); /* CSS3 */
}
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/menu.js"></script>
<script type="text/javascript" language="javascript">
function printBlock() {
PrintContent = $('#PrintContent').html();
$('body').addClass('printSelected');
$('body').append('<div class="printSelection">'+PrintContent+'</div>');
window.print();
window.setTimeout(pageCleaner,0);
return false;
}
function pageCleaner(){
$('body').removeClass('printSelected');
$('.printSelection').remove();
}
</script>
<div style="height:1000px">
<body>
<div id="pageBody">
<ul class="menu">
<li><a href="index.html"> <font face="Monotype Corsiva" size="5"><b>Головна</b></font><p></a>
<li><b><font face="Monotype Corsiva"><a href="#"><font size="5">Програма</font></a><font size="5"> </font>
</font></b>
<ul>
<li><b><a href='seminar.html'><font size="5" face="Monotype Corsiva">Семінар</font></a></b></li>
<li><b><a href="o_1.html"><font size="5" face="Monotype Corsiva">Всесвітня історія Опорний коеспект</font></a></b></li>
<li><b><a href="mod_kartka.html"><font size="5" face="Monotype Corsiva">Модульна картка</font></a></b></li>
<li><b><a href="dvd.html"><font size="5" face="Monotype Corsiva">Список відеофільмів та DVD</font></a></b></li>
</ul>
<li><b><font face="Monotype Corsiva"><a href="#"><font size="5">Словники</font></a><font size="5"> </font>
</font></b>
<ul>
<li><b><a href="biograph_dov.html"><font size="5" face="Monotype Corsiva">Біографічний довідник</font></a></b></li <li><b><a href="slovar.html"><font size="5" face="Monotype Corsiva">Словник Термінів</font></a></b></li>
</ul>
<li><b><font face="Monotype Corsiva"><a href="#"><font size="5">Тести</font></a><font size="5"> </font>
</font></b>
<ul>
<li><b><a href='1914—1918.html'><font size="5" face="Monotype Corsiva">Перша світова війна 1914—1918 рр. Повоєнне облаштування світу</font></a></b></li>
<li><b><a href="1917—1923.html"><font size="5" face="Monotype Corsiva">Період повоєнної кризи та революцій 1917—1923</font></a></b></li>
<li><b><a href="1924—1929.html"><font size="5" face="Monotype Corsiva">Період стабілізації в Європі та в Північній Америці 1924—1929</font></a></b></li>
<li><b><a href="1929—1933.html"><font size="5" face="Monotype Corsiva">Світ в період економічної кризи 1929—1933 рр. та подолання її наслідків</font></a></b></li>
</ul>
<li><a href='connect.html'><b><font face="Monotype Corsiva" size="5">Контакти</font></b></a></li>
</ul>
<table width="1293" border="0" align="center" cellspacing="0" cellpadding="0">
<tr><td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="0" align="right">
<td valign="top">
class="midtxt"></div></b></p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p>
<b>
<a href="#" title="Роздрукувати" onclick="printBlock();"><img src="images/print (1).ico" title="Роздрукувати"/></a></b></p>
<tr><td align="right"><img src="images/hr_line.gif" width="432" height="1" alt=""></td></tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="welcome">
<tr>
<td width="228" valign="top" align="right">
<h1>
</div>
</h1>
<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">
</h3>
<p style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">
</p>
<p style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">
<b><font size="6" face="Classica One">Всесв<span lang="en-us">i</span>тня <span lang="en-us">
I</span>стор<span lang="en-us">i</span>я</font></b></p>
<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">
<img src="http://www.semyaryazani.ru/semya/wp-content/uploads/2013/11/Моя-история.-Романовы.jpg" width="815" height="483" align="right"></h3>
<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">
<b><font size="5" face="Classica One"> </div><div id="PrintContent"><div class="midtxt"></div></font></b></h3>
<p><b><font face="Classica One" size="5">Тест по тем<span lang="en-us">i</span>:
<span lang="en-us">"</span>Перша св<span lang="en-us">i</span>това в<span lang="en-us">i</span>йна
1914-1918 рр. Повоэнне облаштування св<span lang="en-us">i</span>ту<span lang="en-us">"</span></font></b></p>
<p align="left">
<b>
<div id="contentmid">
<div class="icons">
</div><div id="PrintContent"><div class="midtxt"></div></b></p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left">
</p>
<p>
<b>
<a href="#" title="Роздрукувати" onclick="printBlock();"><img src="images/print (1).ico" title="Роздрукувати"/></a></b></p>
<tr><td align="right"><img src="images/hr_line.gif" width="432" height="1" alt=""></td></tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="welcome">
<tr>
<td width="228" valign="top" align="right">
<p class="font_small"></p>
</td>
<td valign="top" align="right" id="tema">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td id="body_txt" height="1651">
<table width="1112" border="1" align="center" cellspacing="10" cellpadding="10">
<tr><td id="body_txt">
<div class="container" id="main" role="main">
<script type="text/javascript" language="JavaScript">
var res="34322242"
function check_me()
{
var count=0
with(document.test)
{
if (!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked&&!Q1[4].checked)
{count+=1};
if (!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked&&!Q2[4].checked)
{count+=1};
if (!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked&&!Q3[4].checked)
{count+=1};
if (!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked&&!Q4[4].checked)
{count+=1};
if (!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked&&!Q5[4].checked)
{count+=1};
if (!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked&&!Q6[4].checked)
{count+=1};
(!Q7[0].checked&&!Q7[1].checked&&!Q7[2].checked&&!Q7[3].checked&&!Q7[4].checked)
{count+=1};
if (!Q8[0].checked&&!Q8[1].checked&&!Q8[2].checked&&!Q8[3].checked&&!Q8[4].checked)
{count+=1};
if (count>0)
{alert("Проверьте пожалуйста ваши ответы, возможно вы дали ответ не на все вопросы") }
else answer()
}
}
function control(k, f1,f2,f3,f4,f5,f6,f7,f8) {
if (k==1&&f1.checked) return true;
if (k==2&&f2.checked) return true;
if (k==3&&f3.checked) return true;
if (k==4&&f4.checked) return true;
if (k==5&&f5.checked) return true;
if (k==6&&f6.checked) return true;
if (k==7&&f7.checked) return true;
if (k==8&&f8.checked) return true;
return false;
}
function answer()
{
answ="";
with(document)
{
answ+=control(res.charAt(0) ,test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3],test.Q1[4])?"1":"0"
answ+=control(res.charAt(1) ,test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3],test.Q2[4])?"1":"0"
answ+=control(res.charAt(2) ,test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3],test.Q3[4])?"1":"0"
answ+=control(res.charAt(3) ,test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3],test.Q4[4])?"1":"0"
answ+=control(res.charAt(4) ,test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3],test.Q5[4])?"1":"0"
answ+=control(res.charAt(5) ,test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3],test.Q6[4])?"1":"0"
answ+=control(res.charAt(6) ,test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3],test.Q7[4])?"1":"0"
answ+=control(res.charAt(7) ,test.Q8[0],test.Q8[1],test.Q8[2],test.Q8[3],test.Q8[4])?"1":"0"
showResult();
}
function showResult()
{
var nok=0;
var i,s;
for (i=0; i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}
if(nok==8) s="Відмінно";
if(nok<8) s="Добре";
if(nok<6) s="Задовільно";
if (nok<3) s="НЕзадовільно!";
document.test.s1.
value="Кількість правильних відповідей "+nok+". Ваша відмітка "+s+". Поглянте на вікно поруч з запитаннями. Якщо відповідь правильна, там (+). Якщо ви помилилися, там (-).";
with(document.test)
{
if (answ.charAt(0)=="1") {T1.value=" + "} else {T1.value=" - "};
if (answ.charAt(1)=="1") {T2.value=" + "} else {T2.value=" - "};
if (answ.charAt(2)=="1") {T3.value=" + "} else {T3.value=" - "};
if (answ.charAt(3)=="1") {T4.value=" + "} else {T4.value=" - "};
if (answ.charAt(4)=="1") {T5.value=" + "} else {T5.value=" - "};
if (answ.charAt(5)=="1") {T6.value=" + "} else {T6.value=" - "};
if (answ.charAt(6)=="1") {T7.value=" + "} else {T7.value=" - "};
if (answ.charAt(7)=="1") {T8.value=" + "} else {T8.value=" - "};
}
}
function showhide(obj){
if(obj == 'none') return 'inline';
else return 'none';
}
</script>
<center><font face="Classica One"><b>Тест <span lang="ru">№</span>2</b></font></center><br/><br/>
<!--<span style="color:#B6F070;text-decoration:underline;cursor:pointer;" onclick="document.getElementById('instruction').style.display = showhide(document.getElementById('instruction').style.display)">
Інстркуція</span>
<br/>
<div id="instruction" style="display: none; width: 100%;color:#B6F070">
<ul>
<li>Виберіть один з варіантів на кожний з 8 питаннь;</li>
<li>Натисніть кнопку "Відобразити результати";</li>
<li>Скрипт не відобразить резудьтат, поки Ви не відповисте на всі запитання;</li>
<li>Подивіться в віконце біля кожного завдання. Якщо відповідь правильна, то там (+). Якщо Вы помилилися, там (-).</li>
<li>За кожну правильну відповідь Вам зараховується 1 балл;</li>
<li>Оцінки: менее 3 балів - НЕзадовільно, от 4 но менее 6 - УДОВЛЕТВОРИТЕЛЬНО, 6 и менее 8 - ХОРОШО, 8 - ОТЛИЧНО;</li>
<li>Щоб повторно пройти тест, натисніть кнопку "Пройти заново";</li>
</ul>
</div>-->
<form name="test"><ol>
<li><INPUT type="text" class="colortext" size="1" name="T1" style="text-align:center" readonly/><b> Головна причина Першої світової війни:</b><br/>
<input type="radio" name="Q1"/> створення воєнно-політичного блоку країн Центральної Європи – Троїстого союзу<br />
<input type="radio" name="Q1"/> прагнення Росії до захоплення чорноморських проток Босфор і Дарданелли<br />
<input type="radio" name="Q1"/> загострення протиріч між найбільшими капіталістичними державами<br />
<input type="radio" name="Q1"/> убивство в Сараєві спадкоємця австро-угорського престолу ерцгерцога Франца Фердінанда. <br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T2" style="text-align:center" readonly/><b> До складу Антанти входили</b><br/>
<input type="radio" name="Q2"/> Великобританія, Болгарія, Франція<br />
<input type="radio" name="Q2"/> Франція, Росія, Австро-Угорщина»<br />
<input type="radio" name="Q2"/> Італія, Іспанія, Франція<br />
<input type="radio" name="Q2"/> Росія, Франція, Велика Британія.<br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T3" style="text-align:center" readonly/><b> В основі початкових стратегічних планів кайзерівської Німеччини про «блискавичну війну» у Західній Європі лежав</b><br/>
<input type="radio" name="Q3"/> план «Барбаросса»<br />
<input type="radio" name="Q3"/> план «Ост»<br />
<input type="radio" name="Q3"/>«план Шліффена»<br />
<input type="radio" name="Q3"/>«план Гінденбурга»<br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T4" style="text-align:center" readonly/><b> З метою підбиття підсумків Першої світової війни державами-переможницями була проведена конференція</b><br/>
</b><br/>
<input type="radio" name="Q4"/> Генуезька<br />
<input type="radio" name="Q4"/> Паризька<br />
<input type="radio" name="Q4"/> Лондонська;<br />
<input type="radio" name="Q4"/> Потсдамська<br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T5" style="text-align:center" readonly/><b> До Ради десяти, яка на своїх засіданнях була покликана вирішувати головні проблеми повоєнного устрою світу, входили представники</b><br/>
<input type="radio" name="Q5"/> США, Росії, Франції, Англії, Бельгії;<br />
<input type="radio" name="Q5"/> США, Франції, Італії, Англії, Японії<br />
<input type="radio" name="Q5"/> Англії, США, Франціїі<br />
<input type="radio" name="Q5"/> Німеччини, США, Англії, Франції, Італії<br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T6" style="text-align:center" readonly/><b> Паризька мирна конференція, покликана вирішити глобальні питання міжнародної політики після закінчення І світової війни, проходила в:</b><br/>
<input type="radio" name="Q6"/> 1918р.<br />
<input type="radio" name="Q6"/> 1919р.<br />
<input type="radio" name="Q6"/> 1921р.<br />
<input type="radio" name="Q6"/> 1922р.<br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T7" style="text-align:center" readonly/><b> Автором програми «14 пунктів», що стала новим словом у міжнародних відносинах і багато в чому визначила хід Паризької конференції, був</b><br/>
<input type="radio" name="Q7"/> В. Ленін<br />
<input type="radio" name="Q7"/> Ж. Клемансо<br />
<input type="radio" name="Q7"/> Д. Ллойд Джордж<br />
<input type="radio" name="Q7"/> В. Вільсон<br />
<br/></li><li><INPUT type="text" class="colortext" size="1" name="T8" style="text-align:center" readonly/><b> Ліга Націй була створена з метою</b><br/>
<input type="radio" name="Q8"/> встановлення міжнародного військово-політичного контролю над переможеними країнами<br />
<input type="radio" name="Q8"/> організації боротьби з більшовицькою Росією<br />
<input type="radio" name="Q8"/> контролю за дотриманням міжнародного права й запобігання війнам<br />
<br/></li></ol>
<CENTER>
<P><TEXTAREA name="s1" rows="4" cols="70" readonly> </TEXTAREA> </P>
<INPUT onclick="check_me()" type="button" style="height:35px" value="Відобразити результати"/>
<INPUT type="reset" style="height:35px" value="Пройти заново"/>
</CENTER>
</form>
</td>
</tr>
<tr><td align="center" id="bottom_menu">
<div id="scrollup">
<img src="images/up.png" class="up" alt="Прокрутить вверх" />
</div>
<tr><td align="center" id="bottom_menu">
<!-- <a href="index.html">Главная</a> | <a href="konspekt.html">Конспекты</a> | <a href="test.html">Тесты</a> | <a href="history.html">История</a> | <a href="contact.html">Контакты</a>
-->
<p> </p>
<a href="index.html">Головна</a> |<a href="slovar.html">Словник Термінів</a> |<a href="biograph_dov.html">Біографічний довідник</a> |<a href='connect.html'>Контакти</a>