IX Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
Создание тренажера средствами JavaScript
Автор работы награжден дипломом победителя II степени
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
Введение
Если бы компьютер не был изобретен
как универсальное техническое устройство,
его следовало бы изобрести специально
для целей образования
Энтони Маллан
Современный мир практически невозможен без информационных технологий, которые широко используются во всех сферах человеческой деятельности, в том числе и в образовании. Использование электронных тренажеров может помочь успешно осваивать учебный материал. Применение электронных тренажеров позволяет формировать, развивать и совершенствовать навыки учащихся. Автоматизированный контроль повышает объективность получаемого результата. Учащиеся, работая с тренажером, сразу видят свой результат, что способствует дальнейшему продвижению в изучении учебного материала.
Цель работы:
создание учебного тренажера средствами JavaScript.
Задачи:
изучить интернет-источники и литературу по данному вопросу,
разработать интерфейс тренажера,
написать программный код,
протестировать тренажер.
Гипотеза исследования: формирование навыков перевода чисел из одной системы счисления в другую школьников будет более успешным, если использовать для тренировки и проверки знаний компьютерные тренажеры.
Сегодня персональный компьютер превратился в непременное требование нашей работы и жизни. В связи с этим появляется все больший интерес к использованию компьютера для автоматизации образовательного процесса. В обучении – это, прежде всего, касается процесса контроля результатов обучения.
Технические средства развиваются очень быстро, при этом уменьшается цена на вычислительную технику, появляются качественные и мощные системы программирования, тем самым увеличивается потребность в системах, позволяющих объективно, быстро и надежно оценивать знания учащихся, предлагая интересные формы взаимодействия с ними. [1]
Компьютерная автоматическая проверка имеет некоторые преимущества:
объективность при оценке результатов,
удобная количественная форма для выражения результатов,
повышенная устойчивость к искажению результатов,
результат проверки появляется сразу после выполнения заданий.
Автоматизация контроля позволяет заметно повысить индивидуальность самого контроля. Появляется гораздо больше возможностей в заданиях с генерированием ответов. Компьютерная проверка знаний используется для контроля знаний, и в этом случае легко ввести временные ограничения или временное отслеживание процесса тестирования, что трудноосуществимо при бумажном тестировании. Преимуществом компьютерной проверки знаний является автоматическая проверка результатов и исключение влияния человеческого фактора.
Но вместе с перечисленными достоинствами такой проверки существуют и некоторые недостатки:
негативные психологические реакции,
воздействие на результаты учащихся предшествующего опыта работы на компьютере,
автоматический контроль не способствует развитию устной и письменной речи учащихся;
выбор ответа может происходить наугад, учителю невозможно проследить логику рассуждений учащихся.
В предыдущей своей работе я пробовал создавать тренажер с помощью языка программирования Lazarus. В данной работе для создания тренажера был выбран язык JavaScript. Код на JavaScript может работать только внутри браузера. Поэтому для размещения тренажера было решено создать сайт.
Преимущества сайтов:
Информация, размещенная в сети интернет, доступна по всему миру.
Для просмотра страниц достаточно браузера.
Работает на различных устройствах.
Простота использования (т.е. не требуется специальная установка)
Недостатки сайтов:
DDoS атаки.
Javascript является интерпретируемым языком для документов HTML. HTML – стандартизированный язык разметки документов. Язык HTML интерпретируется браузерами, полученный в результате форматированный текст отображается на экране монитора.
Основная часть
Для реализации практической части работы необходимо было:
изучить HTML5
изучить CSS3
изучить CSS-фреймворк Bootstrap 4.4.1
изучить JavaScript.
Знание HTML необходимо для построения каркаса страницы. CSS – это язык таблиц стилей, нужен для улучшения графической части страницы, то есть, создав один раз файл со стилями, его можно будет использовать на всех страницах сайта, которые подключили этот файл. Bootstrap – это CSS-фреймворк, содержит уже готовые стили (настройки) сайта, например готовые кнопки, карточки, «шапку» и «подвал» страницы.
Для написания кода на JavaScript, HTML, CSS была установлена среда программирования – Visual Studio Code.
Далее всю работу можно разделить на несколько этапов.
создание графического интерфейса тренажера – расположение всех необходимых элементов на страницах сайта и разработка дизайна сайта,
написание программного кода, который определит, что делает каждый компонент,
отладка работы сайта и тренажера.
Графический интерфейс сайта
В верхней части первой страницы сайта расположена шапка сайта с логотипом и переход на страницу «тренажёрный зал» или на страницу «Главная», для её создания использован Bootstrap (рис.1). Программный код представлен в приложении 1.
Рис.1. Шапка сайта.
Вторая часть главной страницы – это слайдер «Карусель» (рис. 2). «Карусель» создана с помощью Bootstrap’a. Программный код представлен в приложении 2.
Рис. 2 Слайдер «Карусель»
Далее на странице расположен элемент Jumbotron, он служит для разделения блоков сайта. Jumbotron выделен серым цветом (рис.3). Есть кнопка, предназначенная для перехода на страницу тренажёрного зала.
Рис.3. Jumbotron
Завершают главную страницу 3 элемента. Один из них блок с информацией «Зачем нужен тренажёр?», второй элемент – декоративный и выводит фиксированную картинку гор, третий элемент содержит ссылку на контакты (рис.4).
Рис.4. Вторая часть Главной страницы.
И если соединить все эти элементы в одну страницу, то получим главную страницу сайта которая выглядит вот так (рис. 5):
Рис. 5. Главная страница сайта.
В шапке сайта и в jumbotron’е есть переход на страницу под названием «Тренажёрный зал» или «Приступить к тренировке». Страница «Тренажёрный зал» выглядит так (рис. 6):
Рис. 6. Страница «Тренажерный зал»
На этой странице тренажер предлагает выбор «вида тренировки»: работа с 2-ичной, 8-ичной или 16-ичной системой счисления. Если выполнить переход, выполнив щелчок по любой из кнопок «Перейти» (рис. 6), то можно получить доступ к выбору разных уровней в двух частях страницы. Один из них (например, 102) обозначает, что будет генерироваться случайное число в 10-ичной системе счисления, а ответ надо будет ввести в 2-ичной системе счисления, а в другой части будет генерироваться случайное число в 2-ичной системе счисления, а ответ необходимо дать в 10-ой системе счисления.
Рис 7. Режим выбора тренировки 10-ичной и 2-ичной систем счисления.
Уровни обозначают диапазон для генерации случайного числа. Диапазон у уровней следующий:
|
Уровни |
2-ичная система |
8-ичная система |
16-ичная система |
|
I |
1 – 10 |
5 – 15 |
10 – 20 |
|
II |
5 – 20 |
10 – 25 |
15 – 30 |
|
III |
10 – 30 |
15 – 35 |
20 – 40 |
|
IV |
20 – 60 |
25 – 65 |
30 – 70 |
|
V |
50 – 150 |
50 – 150 |
50 – 150 |
Страница с тренировкой по переводу из десятичной системы в двоичную выглядит следующим образом (рис. 8):
Рис. 8. Страница тренировки с двоичной системой счисления
В центральной части страницы выделен специальный блок для вывода случайного в данном случае десятичного числа, которое затем необходимо перевести в двоичную систему счисления. Для ввода ответа выделено поле ввода. Имеются кнопки для проверки правильности введенного ответа и для генерации следующего случайного числа. При нажатии на кнопку «Проверить» эта кнопка становится недоступной, а активной становится кнопка «Следующее число», и при нажатии на кнопку «Следующее число» она становится недоступной, при этом кнопка «Проверить» становится активной и генерируется случайное число в блоке для вывода и делает цвет этого блока исходным – серым. Далее происходит проверка введённого числа, и если ответ правильный, исходное число подсвечивается зеленым цветом, и красным цветом, если ответ неправильный. Слева приводится статистика ответов: сколько чисел всего переведено, сколько дано правильных и неправильных ответов: синий цвет означает общее количество выполненных переводов чисел, зеленый – количество верных переводов, красный – количество ошибок. Справа выводится список случайных чисел и введенных ответов соответственно.
Алгоритмы перевода чисел
Перевод чисел в десятичную систему счисления был выполнен с использованием следующего алгоритма (программный код представлен в приложении 4).
Исходное число n сначала преобразуем в строку, затем в список, разделенный «,», далее изменяем порядок следования элементов списка на обратный
f = String(String(n).split(""))
f = f.split(",")
f.reverse()
r =0
s = 0…f.length
f[s]! = 0
r+ = f[s]*o**s
r – результат, число в 10 с.с.
В цикле со счетчиком, где s – количество цифр числа: если цифра исходного числа не равна 0, в переменной r накапливается сумма, в которой каждая цифра умножается на степень: основание системы счисления возводится в степень с номером цифры
да
r
да
Перевод чисел из десятичной системы счисления был выполнен с использованием следующего алгоритма (программный код представлен в приложении 5):
Изменяем порядок следования элементов в списке на обратный и объединяем все элементы списка в одну переменную и выводим её на экран
Пока исходное число больше 0, создаем список элементы, которого остатки от деления исходного числаnна основание новой системы, для числа n находим целую часть при делении на основание новой системы счисления и повторяем все действия
нет
да
n> 0
f.push(String(n % i))
n = Math.floor(n/i)
f.reverse()
f.join(“”)
О тладка
На протяжении создания сайта возникали различные проблемы. После того как была создана мобильная версия сайта (рис. 9) текст на картинке стал «уходить» при маленьком разрешении экрана, элементы на странице тренажёра на маленьком экране оказывались прижаты друг к другу.
Для решения этих проблем помог метод проб и ошибок. Я экспериментировал со значениями в разных расширениях экрана, что заняло пару часов, благодаря чему мобильная версия сайта работает нормально.
Рис. 9 Мобильная весия сайта
Думаю, что созданный тренажер будет полезен ученикам, т.к. он позволит потренироваться и закрепить знания и умения по переводу чисел из разных систем счисления, а также может помочь слабым ученикам устранить пробелы в знаниях.
Заключение
В результате проведенной работы я:
разработал тренажер для тренировки и проверки знаний перевода чисел из десятичной системы счисления в двоичную, восьмеричную и шестнадцатеричную и обратно, разработал интерфейс тренажера-сайта, написал программный код и выполнил отладку сайта.
По итогам проведенной работы могу сказать, что работа помогла мне осознать сложность программирования и по-новому взглянуть на предмет информатики, а также думаю, что созданный тренажер поможет ученикам решить проблемы при изучении перевода чисел.
Интернет-источники:
Автоматизация контроля результатов обучения учащихся [Электронный ресурс]-https://studbooks.net/2037482/pedagogika/vvedenie – статья в интернете.
https://html5book.ru/ - учебник по HTML5, CSS
http://learn.javascript.ru/ - учебник по JavaScript
http://itproger.com/ - видеокурсы по HTML5, CSS3, Bootstrap 4
Приложение 1. Программный код создания шапки.
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="#" class="navbar-brand logo">
BrainGum
</a>
<button class="navbar-toggler" type = "button" data- toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="navbar-item">
<a href = "#" class = "nav-link active">Главная</a>
</li>
<li class = "nav-item">
<a href="Gum/main.html" class="nav-link nextactive">Тренажёрный зал</a>
</li>
</ul>
</div>
</div>
</nav>
Приложение 2. Программный код слайдера-карусели.
<div class="carousel slide" data-ride = "carousel" id = "slides" data-ride = "carousel">
<ol class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class = "active"></li>
<li data-target="#slides" data-slide-to="1"></li>
</ol>
<div class="carousel-inner carousel-fade">
<div class = "carousel-item active" data-interval="500">
<img src = "img/f8.jpg">
<div class="carousel-caption">
<h1 class="display-2 tr">Brain Gum</h1>
<h3 class="display-4"><i>Тренажерный Зал Мозга</i></h3>
</div>
<div class = "carousel-item">
<img src = "img/t5.jpg">
<div class="carousel-caption newtime" data-interval="500">
<h1 class="display-2 tr" style="color:#f48b8b">Необходим</h1>
<h3 class="display-4"><i>Улучшит навыки счёта</i></h3>
</div>
</div >
<a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Приложение 3. Программный код элемента Jumbotron.
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-12 col-md-8 col-lg-8 col-xl-9">
<p class = "lead">
Тренажёр нужен для тренировки своих навыков счёта
</p>
</div>
<div class="col-12 col-md-3 col-lg-3 col-xl-2">
<a href="Gum/main.html"><button class="btn btn-success btn-lg" type = "button">Приступить к тренировке</button></a>
</div>
</div>
</div>
Приложение 4. Программный код перевода в десятичную систему счисления
if(i == 10)
{
let f = [];
f = String(String(n).split(""))
f = f.replace(/A/g,"10")
f = f.replace(/B/g,"11")
f = f.replace(/С/g,"12")
f = f.replace(/D/g,"13")
f = f.replace(/E/g,"14")
f = f.replace(/F/g,"15")
f = f.split(",")
f.reverse()
let r = 0;
for(let s in f)
{
f[s] = +(f[s])
if(f[s]!=0)
{
r+=f[s]*o**s
}
}
return r
}
Приложение 5. Программный код перевода из десятичной системы счисления
if(o == 10)
{
let f = [];
n = +n
while(n>0)
{
f.push(String(n%i))
n = Math.floor(n/i)
}
f = f.join(",")
f = f.replace(/A/g,"10")
f = f.replace(/B/g,"11")
f = f.replace(/С/g,"12")
f = f.replace(/D/g,"13")
f = f.replace(/E/g,"14")
f = f.replace(/F/g,"15")
f = f.split(",")
f.reverse()
return f.join("")
}