Как сделать кроссворд html

Как создать кроссворд и организовать конкурс кроссвордов на блоге. Итоги марафона «Эрудит-2»

Как сделать кроссворд html

Приветствую, друзья!Сегодня я хочу поделиться своим опытом с читателями и рассказать о том, как создать кроссворд и реализовать конкурс или марафон кроссвордов на блоге.

Я уже имею небольшой опыт в этом, поскольку сам организовал и провел 2 марафона “Эрудит” и “Эрудит-2”, планирую проводить их регулярно и в будущем. Для того, чтобы организовать подобный конкурс, вам понадобится:

Вот и все, что для этого необходимо, но в таком случае говорят,- легко сказать, да трудно сделать. Я полностью согласен с этим выражением, но, скажу Вам по секрету, что тяжело будет только первый раз, а дальше уже легко.

Результаты марафона кроссвордов “Эрудит-2”, который я проводил на блоге

Во втором конкурсе участия приняло уже больше читателей, но старая гвардия опять получает все призы, поскольку они хорошо провели весь марафон, а в этом соревновании, как известно, побеждают самые выносливые.

Как сделать кроссворд html

Напомню новым читателям, что для победы в конкурсе необходимо было следить за выходом новых кроссвордов на блоге и отгадать его в числе первых и выслать мне в поддержку ключевое слово. Кто набирает больше всего баллов, тот и выигрывает, всё просто!

1 место и приз 250 рублей бесспорно завоевала Анна с 47 баллами!

2 место и приз 150 рублей присуждается Светлане, она набирает 36 баллов!

3 место и приз 100 рублей присуждается Лилии с 35 баллами!

В номинации “Случайный счастливчик” побеждает Alegik и получает 100 рублей

Поздравляю победителя и призеров, сегодня на пьедестале представители прекрасной половины человечества, мужчины, увы, в этот раз не завоевали не одного призового места. Жду номера ваших кошельков, заходите в раздел «Обратная связь» и пишите сообщения.

Надеюсь, марафон прошел в хорошем темпе, кроссворды выходили с интервалом в 6 дней, как и планировалось в начале. Тематика была разнообразная, если есть конкретная тема для будущих кроссвордов, пишите в пожеланиях, рассмотрю обязательно (Alegik, про спорт и спортсменов я помню).

Теперь перейдем к теме поста и научимся создавать кроссворды для сайта.

Создаем кроссворд при помощи Eclipse Crossword

Для создания кроссворда, необходимо перейти на сайт Eclipce Crossword и скачать программу Eclipse Crossword

Как сделать кроссворд html

После этого необходимо установить программу на компьютер и запустить. После этого начинаем создавать наш кроссворд. Делаем как показано на рисунке:

Как сделать кроссворд html

После этого выбираем верхний вариант для нового кроссворда и жмем “Next”

Как сделать кроссворд html

Теперь мы видим поля для составления будущего ребуса. В поле” Word” необходимо вписать слово, а в строке “Clue for this word” его обозначение. У меня в примере слово и его значение, вы подберите свое.

Как сделать кроссворд html

Придумали первое слово, жмете на “Add word to List” и думаем над вторым и так далее. Рекомендую в кроссворде использовать от 12 до 25 слов, сложность продумывайте сами. Необходимо выбирать средние по сложности, иначе отпугнете читателей, и ребус могут бросить на половине.

Как сделать кроссворд html

Когда придумали все слова и считаете, что их количество оптимальное, жмете “Next” внизу справа и переходите к следующему шагу №4.

Как сделать кроссворд html

Тут можно оставить все поля пустыми и идем дальше.

Как сделать кроссворд html

Тут можно оставить все по умолчания, в моем случае кроссворд будет расположен в квадрате 20 на 20 клеток. Тут можете экспериментировать, я выбирал по умолчанию. Затем жмем “Next

Как сделать кроссворд html

Теперь нужно нажимать на надпись “Make another puzzlt like this one” и выбрать вариант кроссворда, который Вам подойдет.

Не забывайте использовать слова различной величины в будущем ребусе, чтобы они пересекались и каждое слово можно было отгадать по предварительно открытым буквам.

Когда вы выбрали нужную модификацию и расположение слов, жмем “Next

После этого нам нужно сохранить наш кроссворд в Jawa Script, для этого:

Как сделать кроссворд html

Нужно нажать на “Save as a web page” (сохранить как веб страницу) и после этого “Interactive with jawa script” и сохраняем этот файл у себя на компе, даем ему название (только латиницей!), например “crossword-matematika-eng”. Последняя приставка eng необходима будет в будущем, чтобы избежать путаницы.

Установка кроссворда на отдельную страницу блога

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

Я расскажу, как реализовать быстро 2 вариант.

Для начала Вам необходимо скачать небольшой архив с папкой и затем его распаковать, у Вас получится папка с названием cw-. Данную папку Вам необходимо залить в корневую папку блога при помощи ftp- клиента FileZilla. У меня на макхосте корневая папка — это папка httpdocs

Как сделать кроссворд html

Как сделать кроссворд html

После этого открываем первый файл (у меня crossword-shkola.html) и вводим название нашего кроссворда

Как сделать кроссворд html

Вместо “Эх…школа” пишите свой заголовок.

Далее открываем английский вариант файл crossword-shkola-eng.html, прокручиваем вниз и находим основной код кроссворда

Как сделать кроссворд html

включительно – это код ключевых слов. Затем мы переходим в этом же редакторе в первый файл crossword-shkola.html и убирайте мой вариант кроссворда (обязательно!), и вставляйте свой.

Как сделать кроссворд html

Не забудьте удалить в коде слова- ответы, поскольку любой желающий сможент их увидеть, открыв исходный код страницы с кроссвордом. Эти Слова ответы находятся тут :

Как сделать кроссворд html

У Вас должно получится так:

Как сделать кроссворд html

Смотрите не удалите кавычку и точку с запятой в конце! );

Вот ваш кроссворд и готов!

Теперь вам необходимо его открыть на своем блоге. В зависимости от названия он будет открываться по адресу

У вас вместо crossword-shkola.html будет свой вариант. После открытия кроссворда, я рекомендую Вам обязательно его проверить, разгадав самому. Это поможет вам устранить ошибки, если они есть.

Вот как это выглядит у меня:

Как сделать кроссворд html

Кликните на картинку и отгадав кроссворд, сможете составить ключевое слово

Рекомендую Вам обязательно описать перед началом марафона

Вот такой вот объемный получился пост сегодня.

Следуя описанию, вы теперь без проблем сможете сами создать интересные кроссворды и организовать марафон кроссвордов на своем блоге. Это очень интересное занятие, но и очень ответственное, помните об этом.

Если возникнут вопросы, пишите в комментариях, возможно, я и упустил какой то момент. С удовольствием оперативно отвечу и подскажу.

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

С удовольствием поучаствую в будущем в ваших марафонах и конкурсах кроссвордов, приглашайте, только я могу и победить, учтите!

Интересные статьи по данной теме:

Хотите в числе первых узнавать о новых статьях и курсах?

Подпишитесь на обновления моего блога и мой канал на YouTube
Если статья вам понравилась, поделитесь с друзьями в социальных сетях. Спасибо!

Источник

Как сделать кроссворд на своем сайте (блоге)?

Друзья, всем привет!

В данной статье я расскажу Вам, как сделать на своем сайте (блоге) кроссворд + дам полезные советы.

Кроссворды на блоге (сайте) помогают увеличить поведенческий фактор и создать увлекательную атмосферу на Вашем портале.

Как сделать кроссворд html

Как сделать кроссворд на блоге (сайте)

Как сделать кроссворд html

Она бесплатная, платить вам не придется. После того, как скачаете программу, запустите ее и вы увидите вот такое окошко:

Как сделать кроссворд html

2. Теперь можно свернуть программу, потому что вам сначала нужно придумать вопросы к своему кроссворду и,
соответственно, ответы на эти самые вопросы.

Кроссворды, которые обычно люди разгадывают на моем блоге, содержат примерно 15 вопросов.

3. Итак, представим, что вопросы и ответы вы уже составили. Теперь вам нужно будет вбить их в программу.

Это делается вот в этом окне:

Как сделать кроссворд html

4. Когда впишите вопросы и ответы, нажмите кнопочку «Next». (от англ. означает «следующий»). Программа предложит вам
сохранить исходный файл кроссворда.

как сделать кроссворд на блоге

Сохраняем, потому что он может потом вам пригодиться. После этого снова нажимаем кнопку «Next».

Для того, что в коде вашего кроссворда люди не могли увидеть готовые ответы, нажмите сначала на кнопку «Options» (см. картинку ниже):

Как сделать кроссворд html

Нажмите кнопку «Web» :

Как сделать кроссворд html

А потом нужно убедиться, что напротив «Do not allow cheating» стоит галочка!

Как сделать кроссворд html

Теперь вам уже потребуется сохранить непосредственно страничку, на которой будет располагаться кроссворд. Сначала жмите на «Sawe as web page»:

Как сделать кроссворд html

А потом кликните на «Interactive with JavaScript»:

Как сделать кроссворд html

5. Итак, какой у нас результат?

Мы придумали вопросы-ответы, вбили их в программу и сохранили кроссворд в виде вебстранички. Отлично! Теперь необходимо разобраться с кодировкой, чтобы буквы отображались корректно, а не как иероглифы и страшные кракозябры.

Открой страничку с помощью программы NotePade ++. И сделайте все так, как я указал на картинках.

Как сделать кроссворд html

Потом выберите нажмите кодировку «Кириллица», а потом нажмите «Преобразовать в UTF-8 без BOM». Сделали? Если да, то нажмите теперь на дискету в левом углу:

Как сделать кроссворд html

Друзья, не забывайте, что страница с кроссвордом пока еще находится на нашем компьютере, а нам нужно закинуть ее на ваш сайт (блог). Для этого нам потребуется программа FileZilla.

Если вы планируете постоянно делать кроссворды на своем сайте, то эта программа будет вашей палочкой- выручалочкой.

Итак, с помощью программы FileZilla закиньте страничку себе на хостинг. Закинули? Отлично.

Теперь нужно проверить все ли работает, как положено?

И после этого можно поставить это дело, как говорится, на конвейер!

Как и обещал в начале этой статьи, я дам вам полезные рекомендации по составлению кроссворда:

2. Не нужно переживать, что ваши кроссворды не будут разгадывать, если вы предложите за победу совсем небольшой приз. Поверьте на слово, многим людям намного важнее почувствовать азарт, нежели получить материальное поощрение.

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

3. Не нужно придумывать для своего кроссворда очень сложные вопросы. В противном случае, человек просто устанет отгадывать такой кроссворд и уйдет с вашего сайта. А этого допускать, ну, никак нельзя.

4. Добавляйте в свои вопросы для кроссворда побольше юмора, позитива и т.д. Поймите, ваш кроссворд будут отгадывать не железные роботы, а живые люди. В интернете очень много различных кроссвордов, но вопросы в них «сухие» и скучные.

Вы же, наоборот, постарайтесь сделать свой кроссворд от души.

Хочется надеяться, что мои советы вам помогут делать качественные кроссворды для своей аудитории.

Хотя, нет, это еще не все!

Еще хочу добавить, что если у вас возникнут какие-либо проблемы и вопросы, связанные с созданием кроссворда, обращайтесь к моему помощнику Вадиму! Он поможет! Его скайп: vokin.vadim

Как сделать кроссворд html

НОВОСТЬ №3. Чтобы гарантированно получать от меня письма с интересными анонсами, добавьте мой адрес в белый список! Подробная инструкция о том, как это сделать здесь.

Как сделать кроссворд html

P.S. Понравилась статья? Подпишитесь на обновления блога, чтобы не пропустить следующий кроссворд.

Поделитесь этой страничкой со своими друзьями, они будут Вам благодарны

Источник

Список литературы

Генератор кроссвордов

Генератор титульных листов

Таблица истинности ONLINE

Прочие ONLINE сервисы

Как создать кроссворд из своих слов

Возможны три варианта создания кроссворда

— из слов имеющейся базы;

— из слов, загруженных пользователем при помощи текстового файла;

— из слов, введенных в форму ввода.

Второй вариант предполагает следующую последовательность действий:

1. Создаем файл Excel с выбранными понятиями следующим образом:

Примечание: максимальное количество слов в кроссворде равно 50.

— в первый столбец помещаем слова, из которых мы хотим сформировать кроссворд,

— во второй столбец – расшифровку – определение каждого из понятий

Как сделать кроссворд html

Примечание:

При созднии кроссворда не гарантируется использование всех загруженных слов. Сгенерированный кроссворд будет содержать 60-90% слов из загруженного списка (а в удачном случае и все 100%). То есть для кроссворда на 20 слов вам нужно составить список на 25-30 слов.

2. Сохраняем файл в формате CSV.

Для этого жмем Сохранить как

Как сделать кроссворд html

В раскрывающемся списке типов файлов для сохранения выбираем CSV (разделители – запятые)

Как сделать кроссворд html

3. На странице генератора кроссвордов в пустых полях вписываем Предмет и Тему создаваемого кроссворда.

Как сделать кроссворд html

4. Остается лишь выбрать файл, сохраненный на вашем компьютере, ввести код с картинки и нажать кнопку Создать.

Как сделать кроссворд html

5. После нажатия кнопки Создать откроется окно с таблицей, в столбцах которой вынесены слова – понятия, их длины и расшифровка – определение.

При необходимости, меняем кодировку:

Как сделать кроссворд html

6. Жмем Создать кроссворд

Как сделать кроссворд html

В реузультате получится кроссворд следующего вида.

Как сделать кроссворд html

Его можно скачать и открыть в текстовом редакторе (MS Word, OpenOffice Writer и т.д.)

Источник

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Кроссворд на HTML5, jQuery и CSS3

Как сделать кроссворд html

Скачать

Источник

Смотрите также:

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *