Как сделать кроссворд у себя на сайте?

Как сделать кроссворд у себя на сайте?:

Друзья, после публикации кроссворда про блогеров и seo кроссворда мне пришло много вопросов: “как же сделать такой кроссворд?”. Сегодня я с радостью расскажу вам как его организовать у себя на сайте. Это легко, а еще и бесплатно ;-).

Как только пришла мне в голову идея создания интерактивного кроссворда, я пошел искать для этого решения. Но к моему удивлению в рунете нет подобной возможности (по крайней мере, которая бы мне подошла). Поэтому я пошел теребить google на поиск в буржунете. После нескольких минут я наткнулся на один очень полезный сайт – EclipseCrossword.com. Там предлагается скачать программу для создания кроссворда. По PR=7 понял, что этому сайту можно доверять. Изначально кроссворды получаются на английском языке, но ниже я расскажу как его русифицировать :smile:.

Для тех, кто не видел пример кроссворда – вот он. Итак, что нужно сделать:

1) Скачиваем программу для создания кроссворда здесь.

2) Устанавливаем ее к себе на компьютер.

3) Открываем установленное приложение, выбираем “Я хочу начать новый кроссворд” и нажимаем “Далее” (Next).

программа для создания кроссворда

4) Далее программа спрашивает есть ли у вас список слов или вы хотите создать новый. Выбираем “Создать новый список слов” и опять же кнопочку “Next”.

программа для создания кроссворда: первый шаг

5) Далее идет добавление необходимых слов. Вводите слово, чуть ниже описание для него и нажимаете кнопку “Add word to list” (добавить слово в список). Итак пока все слова не будут добавлены. Если вы передумали с каким-нибудь словом, то его можно удалить, выбрав его слева в списке и нажав “Remove word” (удалить слово). После того как все слова будут добавлены кнопка “Next”. Программа спросит нужно ли сохранить этот список слов. Если вы хотите работать дальше с этим списком, то сохраняйте.

программа для создания кроссворда: шаг 2

6) На следующем этапе вводите свое имя, имя для кроссворда и желаемые копирайты.

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

7)  Дальше выбираем размер кроссворда в клетках и жмем “Next”.

выбираем размер кроссворда в клетках

8 )  Программа составит возможный вариант для кроссворда. Если он вам сразу понравился, то кликаете на заветную кнопку “Next”. Если же нет, то там есть кнопка “Make another puzzle like this one” (сделать другую раскладку пазлов). Жмете ее пока на экране не появится желаемый вариант.

9) Далее переходите на вкладку “Save as a web page” (сохранить как веб-страницу), жмете на “Interactive with Javascript”, задаете имя и сохраняете у себя на компьютере.

сохраняем полученный кроссворд

Empty gird and clues” – это сохранение в виде статичной веб-страницы с вопросами внизу. “Answer key grid” – кроссворд с ответами.

10) Теперь русифицируем кроссворд. Открываем полученный html-файл через текстовый редактор (я советую пользоваться Notepad++). Если вы будете делать кроссворд для wordpress в кодировке UTF-8, то вам надо сначала сохранить файл в этой кодировке (для Notepad++ это “кодировать в UTF-8 без ВОМ”), а потом после строчки:

<meta name=”generator” content=”EclipseCrossword” />

вставить строчку:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Далее ищем строчку, содержащую фразу:

Copyright 2000-2007 Green Eclipse

Начиная с этой строчки вниз заменяем содержание на содержание этого файла.

Сохраняем полученный html файл и загружаем его на сервер. Все. Поздравляю! Вы создали свой первый интерактивный кроссворд ;-). Как вам такие кроссворды? Я думаю, что он разнообразит контент любого блога или сайта на различную тематику. Если у вас возникли вопросы, то я с удовольствием на них отвечу в комментариях.

Статьи по теме: