Attention game

Attention game

Создай новый проект

Зайди на сайт https://repl.it/ и создай новый проект

Начинаем с нашего любимого HTML

Ты уже это умеешь

Создай тег «h1» в элементе «body». Напиши внутрь этого тега: Timer.

Multiple Choice

Какой тег мы можем использовать для создания абзаца в HTML?

• <br>

• <h1>

• <ol>

• <p>

Ты уже это умеешь

Создай после тега «h1» тег «p».

Multiple Select

При помощи какого тега и атрибута мы можем вставить картинку на наш сайт?

• <img>

• <ol>

• src

• for

• <div>

Ты уже это умеешь

Создай после тега «p» тег «img». Не забудь использовать атрибут src со ссылкой на свою картинку. PS: выбери еще одну картинку, но ссылку на нее никуда не вставляй.

Ты уже это умеешь

Создай после тега «img» тег «br».

Ты уже это умеешь

Создаем две кнопки и укажи у них названия, которые описывают твои картинки. Если ты выбрал(а) картинку кота и собаки, то укажи названия кнопкам: кот и собака.

А как же дизайн?

Ты уже это умеешь

Обратись к тегу «img» и укажи ему какие-то размеры.

Ты уже это умеешь

Обратись к тегу «button» и укажи ему какие-то размеры.

Ты уже это умеешь

Сделай так, чтобы все элементы твоего приложения были по центру.

Немножко магии

Ты уже это умеешь

Создай переменные: btnAll  и img. Присвой этим переменным выбранные элементы: button и img.

Multiple Choice

Какую конструкцию мы должны использовать для создания списка?

• let allImg = []

• let allImg = 5

• let allImg = ""

• let allImg = {}

Multiple Choice

Какую конструкцию мы должны использовать, чтобы записать строку в переменную в JS?

• let name = Ivan

• let link = "https://www.google.com/"

• let number = 5

Ты уже это умеешь

Создай список «allImg» и заполни его двумя ссылками на твои фотографии.

Ты уже это умеешь

Создай переменные: score, text, randomNum, timeText, timerTime. Присвой переменным: score и randomNum число «0». Присвой переменным: text и timeText выбранные элементы «p» и «h1». Присвой переменной timerTime число «60».

Multiple Choice

Какую функцию мы можем использовать для повторения действий через определенный промежуток времени бесконечное количество раз?

• setTimeout()

• setInterval()

• setRepeater()

• setDelay()

Ты уже это умеешь

Создай переменную «timer» и присвой ей функцию «setInterval» с параметрами: function и 1000.

Ты уже это умеешь

В функции конструкции «setInterval» создай if-блок. Укажи у него вот такое условие: timerTime == 0.

Ты уже это умеешь

В if-блоке напиши вот такие две команды:

 btnAll[0].removeEventListener("click",envLetter)

 btnAll[1].removeEventListener("click",letter)

Multiple Choice

При помощи какой функции мы можем остановить работу конструкции «setInterval»?

• clearInterval()

• clear()

• delete()

Ты уже это умеешь

Вызови функцию «clearInterval» и передай ей параметр «timer».

Multiple Choice

При помощи какого метода мы можем изменять текст в теге HTML?

• style

• setAttribute

• innerText

• width

Ты уже это умеешь

Напиши вот такую конструкцию в свой код:

text.innerText = "You final score is " + score

Ты уже это умеешь

Выйди из if-блока. Напиши в функции конструкции «setInterval» вот такой кодик:

 timeText.innerText = timerTime--

Multiple Choice

При помощи какого метода мы можем задать нашему элементу какое-нибудь событие?

• listenerEventAdd

• addEvent

• eventAdd

• addEventListener

Ты уже это умеешь

Выйди из конструкции «setInterval». Напиши вот такие команды:

btnAll[0].addEventListener("click",envLetter )

btnAll[1].addEventListener("click", letter)

Ты уже это умеешь

Создай функцию «envLetter» и укажи в ней if-блок. Укажи у if-блока условие:

randomNum == 0

Ты уже это умеешь

Укажи в if-блоке команду, которая будет увеличивать переменную «score» на 1. Воспользуйтесь методом «innerText» у переменной «text». Присвойте этой конструкции переменную «score»

Ты уже это умеешь

Присвой переменной «randomNum» конструкцию: Math.floor(Math.random()*2)

Multiple Choice

C помощью какого метода мы можем менять атрибуты и добавлять их у нашего элемента?

• innerText

• setAttribute

• innerHtml

• style

Ты уже это умеешь

У переменной «img» вызови метод «setAttribute» с параметрами: "src" и allImg[randomNum].

Ты уже это умеешь

Выйди из if-блока и создай else-блок. Укажи в else-блоке конструкцию, которая будет вычитать единицу от переменной «score». Также добавь вот эти конструкции:

 text.innerText = score

    randomNum = Math.floor(Math.random()*2)

    img.setAttribute("src",allImg[randomNum])

Ты уже это умеешь

Создай функцию «letter» и укажи у нее if-блок. Укажи if-блоку вот такое условие:

randomNum == 1

Ты уже это умеешь

Укажи в if-блоке вот такие конструкции:

score++

    text.innerText = score

    randomNum = Math.floor(Math.random()*2)

    img.setAttribute("src",allImg[randomNum])

Ты уже это умеешь

Создай else-блок и укажи у него вот такие конструкции:

score--;

    text.innerText = score

    randomNum = Math.floor(Math.random()*2)

    img.setAttribute("src",allImg[randomNum])