Как сделать кроссворд html
Как создать кроссворд и организовать конкурс кроссвордов на блоге. Итоги марафона «Эрудит-2»
Приветствую, друзья!Сегодня я хочу поделиться своим опытом с читателями и рассказать о том, как создать кроссворд и реализовать конкурс или марафон кроссвордов на блоге.
Я уже имею небольшой опыт в этом, поскольку сам организовал и провел 2 марафона “Эрудит” и “Эрудит-2”, планирую проводить их регулярно и в будущем. Для того, чтобы организовать подобный конкурс, вам понадобится:
Вот и все, что для этого необходимо, но в таком случае говорят,- легко сказать, да трудно сделать. Я полностью согласен с этим выражением, но, скажу Вам по секрету, что тяжело будет только первый раз, а дальше уже легко.
Результаты марафона кроссвордов “Эрудит-2”, который я проводил на блоге
Во втором конкурсе участия приняло уже больше читателей, но старая гвардия опять получает все призы, поскольку они хорошо провели весь марафон, а в этом соревновании, как известно, побеждают самые выносливые.
Напомню новым читателям, что для победы в конкурсе необходимо было следить за выходом новых кроссвордов на блоге и отгадать его в числе первых и выслать мне в поддержку ключевое слово. Кто набирает больше всего баллов, тот и выигрывает, всё просто!
1 место и приз 250 рублей бесспорно завоевала Анна с 47 баллами!
2 место и приз 150 рублей присуждается Светлане, она набирает 36 баллов!
3 место и приз 100 рублей присуждается Лилии с 35 баллами!
В номинации “Случайный счастливчик” побеждает Alegik и получает 100 рублей
Поздравляю победителя и призеров, сегодня на пьедестале представители прекрасной половины человечества, мужчины, увы, в этот раз не завоевали не одного призового места. Жду номера ваших кошельков, заходите в раздел «Обратная связь» и пишите сообщения.
Надеюсь, марафон прошел в хорошем темпе, кроссворды выходили с интервалом в 6 дней, как и планировалось в начале. Тематика была разнообразная, если есть конкретная тема для будущих кроссвордов, пишите в пожеланиях, рассмотрю обязательно (Alegik, про спорт и спортсменов я помню).
Теперь перейдем к теме поста и научимся создавать кроссворды для сайта.
Создаем кроссворд при помощи Eclipse Crossword
Для создания кроссворда, необходимо перейти на сайт Eclipce Crossword и скачать программу Eclipse Crossword
После этого необходимо установить программу на компьютер и запустить. После этого начинаем создавать наш кроссворд. Делаем как показано на рисунке:
После этого выбираем верхний вариант для нового кроссворда и жмем “Next”
Теперь мы видим поля для составления будущего ребуса. В поле” Word” необходимо вписать слово, а в строке “Clue for this word” его обозначение. У меня в примере слово и его значение, вы подберите свое.
Придумали первое слово, жмете на “Add word to List” и думаем над вторым и так далее. Рекомендую в кроссворде использовать от 12 до 25 слов, сложность продумывайте сами. Необходимо выбирать средние по сложности, иначе отпугнете читателей, и ребус могут бросить на половине.
Когда придумали все слова и считаете, что их количество оптимальное, жмете “Next” внизу справа и переходите к следующему шагу №4.
Тут можно оставить все поля пустыми и идем дальше.
Тут можно оставить все по умолчания, в моем случае кроссворд будет расположен в квадрате 20 на 20 клеток. Тут можете экспериментировать, я выбирал по умолчанию. Затем жмем “Next”
Теперь нужно нажимать на надпись “Make another puzzlt like this one” и выбрать вариант кроссворда, который Вам подойдет.
Не забывайте использовать слова различной величины в будущем ребусе, чтобы они пересекались и каждое слово можно было отгадать по предварительно открытым буквам.
Когда вы выбрали нужную модификацию и расположение слов, жмем “Next”
После этого нам нужно сохранить наш кроссворд в Jawa Script, для этого:
Нужно нажать на “Save as a web page” (сохранить как веб страницу) и после этого “Interactive with jawa script” и сохраняем этот файл у себя на компе, даем ему название (только латиницей!), например “crossword-matematika-eng”. Последняя приставка eng необходима будет в будущем, чтобы избежать путаницы.
Установка кроссворда на отдельную страницу блога
После того, как наш кроссворд составлен и сохранен на компьютере, нам желательно его русифицировать. Есть два варианта размещения ребуса на блоге это в теле поста или на отдельной странице.
Я расскажу, как реализовать быстро 2 вариант.
Для начала Вам необходимо скачать небольшой архив с папкой и затем его распаковать, у Вас получится папка с названием cw-. Данную папку Вам необходимо залить в корневую папку блога при помощи ftp- клиента FileZilla. У меня на макхосте корневая папка — это папка httpdocs
После этого открываем первый файл (у меня crossword-shkola.html) и вводим название нашего кроссворда
Вместо “Эх…школа” пишите свой заголовок.
Далее открываем английский вариант файл crossword-shkola-eng.html, прокручиваем вниз и находим основной код кроссворда
включительно – это код ключевых слов. Затем мы переходим в этом же редакторе в первый файл crossword-shkola.html и убирайте мой вариант кроссворда (обязательно!), и вставляйте свой.
Не забудьте удалить в коде слова- ответы, поскольку любой желающий сможент их увидеть, открыв исходный код страницы с кроссвордом. Эти Слова ответы находятся тут :
У Вас должно получится так:
Смотрите не удалите кавычку и точку с запятой в конце! );
Вот ваш кроссворд и готов!
Теперь вам необходимо его открыть на своем блоге. В зависимости от названия он будет открываться по адресу
У вас вместо crossword-shkola.html будет свой вариант. После открытия кроссворда, я рекомендую Вам обязательно его проверить, разгадав самому. Это поможет вам устранить ошибки, если они есть.
Вот как это выглядит у меня:
Кликните на картинку и отгадав кроссворд, сможете составить ключевое слово
Рекомендую Вам обязательно описать перед началом марафона
Вот такой вот объемный получился пост сегодня.
Следуя описанию, вы теперь без проблем сможете сами создать интересные кроссворды и организовать марафон кроссвордов на своем блоге. Это очень интересное занятие, но и очень ответственное, помните об этом.
Если возникнут вопросы, пишите в комментариях, возможно, я и упустил какой то момент. С удовольствием оперативно отвечу и подскажу.
Надеюсь этот подробный мануал вам будет полезен, поскольку я не нашел ничего похожего в интернете.
С удовольствием поучаствую в будущем в ваших марафонах и конкурсах кроссвордов, приглашайте, только я могу и победить, учтите!
Интересные статьи по данной теме:
Хотите в числе первых узнавать о новых статьях и курсах?
Подпишитесь на обновления моего блога и мой канал на YouTube
Если статья вам понравилась, поделитесь с друзьями в социальных сетях. Спасибо!
Как сделать кроссворд на своем сайте (блоге)?
Друзья, всем привет!
В данной статье я расскажу Вам, как сделать на своем сайте (блоге) кроссворд + дам полезные советы.
Кроссворды на блоге (сайте) помогают увеличить поведенческий фактор и создать увлекательную атмосферу на Вашем портале.
Как сделать кроссворд на блоге (сайте)
Она бесплатная, платить вам не придется. После того, как скачаете программу, запустите ее и вы увидите вот такое окошко:
2. Теперь можно свернуть программу, потому что вам сначала нужно придумать вопросы к своему кроссворду и,
соответственно, ответы на эти самые вопросы.
Кроссворды, которые обычно люди разгадывают на моем блоге, содержат примерно 15 вопросов.
3. Итак, представим, что вопросы и ответы вы уже составили. Теперь вам нужно будет вбить их в программу.
Это делается вот в этом окне:
4. Когда впишите вопросы и ответы, нажмите кнопочку «Next». (от англ. означает «следующий»). Программа предложит вам
сохранить исходный файл кроссворда.
как сделать кроссворд на блоге
Сохраняем, потому что он может потом вам пригодиться. После этого снова нажимаем кнопку «Next».
Для того, что в коде вашего кроссворда люди не могли увидеть готовые ответы, нажмите сначала на кнопку «Options» (см. картинку ниже):
Нажмите кнопку «Web» :
А потом нужно убедиться, что напротив «Do not allow cheating» стоит галочка!
Теперь вам уже потребуется сохранить непосредственно страничку, на которой будет располагаться кроссворд. Сначала жмите на «Sawe as web page»:
А потом кликните на «Interactive with JavaScript»:
5. Итак, какой у нас результат?
Мы придумали вопросы-ответы, вбили их в программу и сохранили кроссворд в виде вебстранички. Отлично! Теперь необходимо разобраться с кодировкой, чтобы буквы отображались корректно, а не как иероглифы и страшные кракозябры.
Открой страничку с помощью программы NotePade ++. И сделайте все так, как я указал на картинках.
Потом выберите нажмите кодировку «Кириллица», а потом нажмите «Преобразовать в UTF-8 без BOM». Сделали? Если да, то нажмите теперь на дискету в левом углу:
Друзья, не забывайте, что страница с кроссвордом пока еще находится на нашем компьютере, а нам нужно закинуть ее на ваш сайт (блог). Для этого нам потребуется программа FileZilla.
Если вы планируете постоянно делать кроссворды на своем сайте, то эта программа будет вашей палочкой- выручалочкой.
Итак, с помощью программы FileZilla закиньте страничку себе на хостинг. Закинули? Отлично.
Теперь нужно проверить все ли работает, как положено?
И после этого можно поставить это дело, как говорится, на конвейер!
Как и обещал в начале этой статьи, я дам вам полезные рекомендации по составлению кроссворда:
2. Не нужно переживать, что ваши кроссворды не будут разгадывать, если вы предложите за победу совсем небольшой приз. Поверьте на слово, многим людям намного важнее почувствовать азарт, нежели получить материальное поощрение.
Я не спорю, конечно, многие любят получать деньги, но бывают ситуации, когда интерес становится важнее денег.
3. Не нужно придумывать для своего кроссворда очень сложные вопросы. В противном случае, человек просто устанет отгадывать такой кроссворд и уйдет с вашего сайта. А этого допускать, ну, никак нельзя.
4. Добавляйте в свои вопросы для кроссворда побольше юмора, позитива и т.д. Поймите, ваш кроссворд будут отгадывать не железные роботы, а живые люди. В интернете очень много различных кроссвордов, но вопросы в них «сухие» и скучные.
Вы же, наоборот, постарайтесь сделать свой кроссворд от души.
Хочется надеяться, что мои советы вам помогут делать качественные кроссворды для своей аудитории.
Хотя, нет, это еще не все!
Еще хочу добавить, что если у вас возникнут какие-либо проблемы и вопросы, связанные с созданием кроссворда, обращайтесь к моему помощнику Вадиму! Он поможет! Его скайп: vokin.vadim
НОВОСТЬ №3. Чтобы гарантированно получать от меня письма с интересными анонсами, добавьте мой адрес в белый список! Подробная инструкция о том, как это сделать здесь.
P.S. Понравилась статья? Подпишитесь на обновления блога, чтобы не пропустить следующий кроссворд.
Поделитесь этой страничкой со своими друзьями, они будут Вам благодарны
Список литературы
Генератор кроссвордов
Генератор титульных листов
Таблица истинности ONLINE
Прочие ONLINE сервисы
Как создать кроссворд из своих слов
Возможны три варианта создания кроссворда
— из слов имеющейся базы;
— из слов, загруженных пользователем при помощи текстового файла;
— из слов, введенных в форму ввода.
Второй вариант предполагает следующую последовательность действий:
1. Создаем файл Excel с выбранными понятиями следующим образом:
Примечание: максимальное количество слов в кроссворде равно 50.
— в первый столбец помещаем слова, из которых мы хотим сформировать кроссворд,
— во второй столбец – расшифровку – определение каждого из понятий
Примечание:
При созднии кроссворда не гарантируется использование всех загруженных слов. Сгенерированный кроссворд будет содержать 60-90% слов из загруженного списка (а в удачном случае и все 100%). То есть для кроссворда на 20 слов вам нужно составить список на 25-30 слов.
2. Сохраняем файл в формате CSV.
Для этого жмем Сохранить как
В раскрывающемся списке типов файлов для сохранения выбираем CSV (разделители – запятые)
3. На странице генератора кроссвордов в пустых полях вписываем Предмет и Тему создаваемого кроссворда.
4. Остается лишь выбрать файл, сохраненный на вашем компьютере, ввести код с картинки и нажать кнопку Создать.
5. После нажатия кнопки Создать откроется окно с таблицей, в столбцах которой вынесены слова – понятия, их длины и расшифровка – определение.
При необходимости, меняем кодировку:
6. Жмем Создать кроссворд
В реузультате получится кроссворд следующего вида.
Его можно скачать и открыть в текстовом редакторе (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
Скачать
Источник
Смотрите также:
SEO-продвижение
Автоматическое продвижение сайта в TOP.
Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.
Последняя версия jQuery:
Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.