Форум

Leon2110 · #1 (**permalink**) 15.01.2020, 22:33

Хочу на своем сайте учителя сделать небольшие игры, для зарегистрированных пользователей. Игры (тесты) простые, типа перетащи слова в нужные места, или соедени линиями или выбери перевод ну и в таком духе, смысл что надо что-то правильно перетащить по экрану. Это должно работать в браузере и желательно использовать html+css+js, чтобы в конце можно было отправить как обычную html форму, я проверю это все дело на php и запишу результаты в базу.
Сам вопрос, на чем это можно делать? html+css+php я знаю довольно не плохо, но этого не достаточно, js знаю плохо, но насколько я понимаю там нельзя зделать всю эту кухню с перетаскиваниями элементов по экрану и чтобы они прилипали к блокам, возможно для этого есть какая-то библиотека.

Хотябы одну сделать и потом напишу под нее админку, чтобы на ее основе можно было тупо менять слова и собирать новые игры (тесты).

Еще раз чтобы было понятнее, формы я могу сделать любые, с чекбоксами, выпадающими списками и стилизовать их как угодно, мне нужна интерактивность, вот ее не знаю как сделать. Пример, слева 3 разноцветных замка, справа 3 таких же цветов ключа, все ключи можно схватить и дотащить до любого замка, после отправки формы те которые совпали откроются, а остальные нет и вот типа такого. После я поменяю замки и ключи на животных и их еду или другие подобные вещи)

Готов рассмотреть все предложения.

Aetae · #2 (**permalink**) 15.01.2020, 23:06

Гуглите по "drag and drop" и выбирайте библиотеку по вкусу.

Leon2110 · #3 (**permalink**) 16.01.2020, 00:50

Что-то получается, пока не могу решить чтобы если уже есть слово, второе туда нельзя перетащить было или они менялись бы местами:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div3 {
    display: inline-block;
  width: 100px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
#div1 input, #div2 input, #div3 input {
	width: 100%;
    display: block;
    text-align: center;
    vertical-align: middle;
    background: #006696;
    color: #fff;
}
.mesto {
    height: 20px;
    min-width: 70px;
    border: 1px solid #000;
    display: inline-block;
    vertical-align: middle;
    background: #006696;
}
.mesto input {
    width: fit-content;
    background: #006696;
    padding: 0 10px;
    color: #fff;
    border: none;
    vertical-align: middle;
    text-align: center;
    min-width: 50px;
    height: inherit;
}
p {
    display: block;
    float: none;
    clear: both;
    margin-top: 50px;}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<h2>Расставь пропущенные слова в предлоежнии</h2>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<input type="text" disabled draggable="true" ondragstart="drag(event)" value="Магазин" id="drag1">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
	<input type="text" disabled draggable="true" ondragstart="drag(event)" value="Молоко" id="drag2">
</div>

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
	<input type="text" disabled draggable="true" ondragstart="drag(event)" value="Хлеб" id="drag3">
</div>

<p>
Он пошел в 
<span class="mesto" id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
 , чтобы купить <span class="mesto" id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></span> и свежий <span class="mesto" id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></span> на ужин.
 </p>

</body>
</html>

// Сори, не получилось чтобы внизу была кнопка с запуском((

Aetae · #4 (**permalink**) 16.01.2020, 01:01

[HTML run] - чтоб был запуск.
Не рекомендую использовать нативный d&d - слишком много ручной работы, граблей и подводных камней для чего угодно кроме "базовых примеров". Найдите жирную библиотеку с поддержкой всего-всего и заюзайте. Если когда-нибудь захочется оптимизировать всё в натив - тогда уже спокойно сможет ковыряться в этом не рискуя закончить не начав.

Malleys · #5 (**permalink**) 16.01.2020, 09:21

Сообщение от Aetae

Не рекомендую использовать нативный d&d - слишком много ручной работы, граблей и подводных камней для чего угодно кроме "базовых примеров"

Вы определённо используете не по назначению! Это не про «переместить картинку с одного места на другое», это в первую очередь про перемещение данных и за рамки браузера тоже. Это про переместить фото на рабочий стол, перетянуть текст (например, для поиска в новой вкладке), перетянуть файл с рабочего стола в веб-приложение и пр.

Leon2110, у вас разметка определённо усложнена... Вот ваш пример (только разметка, достаточно указать, что должно перетаскиваться (атрибут draggable="true"), в какой элемент, можно перетаскивать (атрибут dropzone), также вы можете захотеть, чтобы определённые dropzone могли принимать более чем один элемент (можно сделать, например, при помощи собственного атрибута data-multiple, это вы для себя решаете, что по умолчанию dropzone принимает только один элемент, а при указании data-multiple — сколько угодно)) Вот ваш пример в более читаемом виде...

<section id="game-1">
	<h1>Расставь пропущенные слова в предложении</h1>
	<ul dropzone data-multiple>
		<li draggable="true">Магазин</li>
		<li draggable="true">Молоко</li>
		<li draggable="true">Хлеб</li>
	</ul>
	<p>
		Он пошел в <span dropzone></span>, чтобы купить <span dropzone></span> и свежий <span dropzone></span> на ужин.
	</p>
</section>

В принципе, оперируя атрибутами draggable="true", dropzone и data-multiple можно описать игры в слова, типа «заполнить пропуски», «расставить буквы», а также «собрать пазл» и пр. подобное.

При отпускании элемента с атрибутом draggable="true" над элементом с атрибутом dropzone происходит всплывающее событие drop (вообще-то оно происходит везде, но вас интересуют только взаимодействие элементов с атрибутами draggable="true" и dropzone) Отслеживая это событие, вы сможете, например, когда определённые ячейки в игре будут заполнены, проверить правильность заполнения (даже при помощи серверной программы!) Также вас наверняка интересует область видимости, т. е. чтобы в случае нескольких игр на странице, нельзя было элементы от одной игры перетаскивать в другие игры. (В скрипте, который я вам приведу, область видимости ограничивается ближайшим элементом с селектором section или .task)

Стили вы можете применить ко всем этим элементам, возможности безграничны!

Теперь рабочий пример. Вот к вашему примеру ещё «пазл», чтобы было видно, как работает область видимости — https://codepen.io/Malleys/pen/GRgXqJW?editors=1010

рони · #6 (**permalink**) 16.01.2020, 09:57

Malleys,

Leon2110 · #7 (**permalink**) 17.01.2020, 14:38

Malleys, спасибо, это просто бомба, то что нужно)

Ай да js)) Замечательные примеры, буду повторять у себя, придумаю как сделать валидацию, правильно ли задание было выполнено и надо писать какую-то мини админку через которую обычный учитель без знаний программирования сможет собирать подобные тесты.

Форум

Справочник

Discord чат

Курсы javascript