Друзья, после публикации кроссворда про блогеров и seo кроссворда мне пришло много вопросов: “как же сделать такой кроссворд?”. Сегодня я с радостью расскажу вам как его организовать у себя на сайте. Это легко, а еще и бесплатно.
Как только пришла мне в голову идея создания интерактивного кроссворда, я пошел искать для этого решения. Но к моему удивлению в рунете нет подобной возможности (по крайней мере, которая бы мне подошла). Поэтому я пошел теребить google на поиск в буржунете. После нескольких минут я наткнулся на один очень полезный сайт – EclipseCrossword.com. Там предлагается скачать программу для создания кроссворда. По PR=7 понял, что этому сайту можно доверять. Изначально кроссворды получаются на английском языке, но ниже я расскажу как его русифицировать.
Для тех, кто не видел пример кроссворда – вот он. Итак, что нужно сделать:
1) Скачиваем программу для создания кроссворда здесь.
2) Устанавливаем ее к себе на компьютер.
3) Открываем установленное приложение, выбираем “Я хочу начать новый кроссворд” и нажимаем “Далее” (Next).
4) Далее программа спрашивает есть ли у вас список слов или вы хотите создать новый. Выбираем “Создать новый список слов” и опять же кнопочку “Next”.
5) Далее идет добавление необходимых слов. Вводите слово, чуть ниже описание для него и нажимаете кнопку “Add word to list” (добавить слово в список). Итак пока все слова не будут добавлены. Если вы передумали с каким-нибудь словом, то его можно удалить, выбрав его слева в списке и нажав “Remove word” (удалить слово). После того как все слова будут добавлены кнопка “Next”. Программа спросит нужно ли сохранить этот список слов. Если вы хотите работать дальше с этим списком, то сохраняйте.
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 файл и загружаем его на сервер. Все. Поздравляю! Вы создали свой первый интерактивный кроссворд 
. Как вам такие кроссворды? Я думаю, что он разнообразит контент любого блога или сайта на различную тематику. Если у вас возникли вопросы, то я с удовольствием на них отвечу в комментариях.
Постовой:
А вы знаете, что учеба за рубежом сейчас набирает положительную динамику роста? Многие хотят получить американское или европейское образование.
А я думал специальный плагин для wp, оказывается всё намного легче. Спасибо.
Есть одно но. В коде страницы видны все слова:) Я уж не знаю, насколько это принципиально.
Вот хорошо объяснили, теперь я тоже попробую составить свой женский кроссворд.Спасибо.
Duna, да, но в код мало кто смотрит
>Есть одно но. В коде страницы видны все слова:)
>Я уж не знаю, насколько это принципиально.
>
Можно немного модифицировать код и слова зашифровать
Это как ответ в конце книги, кто не хочет подумать лезет туда, а если еще бабки за скорость платят, то честно играть не будет никто!
Белоногов Илья, в идеале согласен, но это надо код шифровать или обращаться к разработчикам, что достаточно трудоемкий процесс.
Попробовал зашифровать кусок кода через pr-cy – не работает кроссворд.
Если кроссворд не занимает много времени для создания, я думаю скоро будет еще один. Для меня он стал полезен, думаю каждый получил хотя-бы небольшую пользу от него. Кто-то фан, а кто-то и новые знания
Клевая штукень,
нужно будет попробовать сделать кроссвод по дорам)
сделаю по форекс такой кроссворд))))
Спасибо, будем делать кроссворд на авто тематику)
Полезнаю штучка. КАк нить на досуге попробую у себя на блоге! Авось и пригодится.
Для интересности сайта само то. Очень спасибо за сервис. Тоже обязательно воспользуюсь. А то я думала вы сами клеточки чертите и ломаете голову как бы все совпало.
Как раз хотел у вас спросить, а чем же это кроссворды делали))) Чето у меня правда желание отбилось создать кроссворд, после того как узнал, что в коде ответы. Но в принципе, если делать кроссворд не для продвинутых юзеров, то будет интересно
На словах выглядит все просто))) будет пробовать создать что-то свое)
спс, за инструкцию
Круто
Кроссворд, да ещё и с подсказками 
Кстати, хочу постовой
Все работает замечательно! Спасибо!
Только вот небольшое но… на некоторых компьютерах при открытии кроссворда показывает вместо букв …иероглифы.
Как сделать для всех правильно?
Сайт, на котором находится кроссворд, работает без SMC… только статика.
Спасибо!
Сергей, скорее всего проблема в кодировке. Нужно вставить строчку в код страницы, которая в посте
.
Если эту строчку…
…то вот с ней как раз и такое происходит.
!!!meta http-equiv=”Content-Type” content=”text/html; charset=utf-8?!!!
Ксати скачала и попробовала. Классная штука. Очень понравилась.
Сергей, вместо UTF-8 поставьте windows-1251 (вообщем кодировку сайта). Инструкция была для wordpress с кодировкой UTF-8
Так:?
!!! meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251? !!!
Разобрался!
Спасибо!
Сергей, да
Спасибочки за как всегда полнейшие разъяснения. Спешу попробовать кроссвордик на блог
Спасибо огромное, Сергей!
Давно мечтала о такой полезности, да всё руки не доходили поискать… Буду ставить эксперименты и шифровать.. шифровать! 
а на вашем сайте еще планируется акции с использованием кроссворда?
Ян, думаю, еще что-нибудь придумаю интересное.
Здравствуйте, Сергей!
Спасибо за хорошее решение. Есть одна проблема – не могу вставить кроссворд в сайт.
Текст пояснений есть. Отсутствует сам кроссворд – сама его сетка.
С уважением
Владимир
Vladimir, вы про вставку непосредственно в основное тело сайта? Или даже на отдельной странице не показывается (как в примере выше)?
Здравствуйте, Сергей!
Когда я вставляю HTML текст на одну из страниц своего сайта, пытаясь тем самым дать отдельную страницу только для кроссвордов, то остаётся только текст. Сама решётка кроссворда отсутствует. Сейчас также заметил, что после вставки HTML изменяется сам код, после его преобразования. Тесть меняется после вставки.
Владимир
Vladimir, я конкретно в сайт не пробовал вставлять кроссворд.
Вы в 9-ом пункте выбрали правильную ссылку для сохранения?
Спасибо! Всё, разобрался. Всё работает! Ещё раз спасибо за хорошую программу.
Vladimr, за программу это не мне спасибо – это разработчикам
.
Thank you!!!!!!!!!
Спасибо, классная находка.
Создал свой кроссворд у себя на сайте. Но обнаружил ошибку в переводе в 420 строке вместо “букв(-ы).”, написано “быкв(-ы). ” . Примите к сведению.
Veter, спасибо – поправил!
Sosnovskij, не за что. Находка уж больно хорошая, дельная. Мне в самый раз такая оказалась. Ну а раз нашел ошибку, так пусть и другим поможет поправка.
Скажите, пожалуйста, а можно ли такой кроссворд вставить к себе на сайт? Чтобы страница была оформлена так же, как все страницы моего сайта.
Lucilla, видел где-то такую реализацию, но к сожалению, точно не знаю как это организовать.
Спасибо огромное! сделала первый кроссворд для детей на блоге “Любознайка” http://format-znaika.blogspot.com/
Правда, не смогла русифицировать, не получилось.
Сергей! Если чессс – не пойму как людям удается вставить код на страницах своих сайтов, – при установке кода на WordPress то ли BlogSpot это куча различных символов. Может чего то не хватает? Может порядок установки должен быть специфический? Объясните плиз! Спасибо
Влад, я сам непосредственно на блог его не вставлял. Но вот у “рук” получилось. http://www.rookee.ru/post/2010/05/07/%D0%97%D0%B0%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B9-%D0%B8%D0%B3%D1%80%D0%B0%D1%8E%D1%87%D0%B8.aspx
.
Посмотрите в код страницы, может быть, поможет
Здравствуйте!
Искал описания работы этой программы на русском языке.
И попал на эту страницу .
Написано подробно.
Благодарен Сергей.
Не понимаю. Что ни делал – все равно значки только вылазят и все.
не становится весь код целиком. Было бы не плохо, если бы подсказали как вставить код в сайт, который создан в зоне Google site.
спасибо
Спасибо за материал. Студентов своих обрадую. Новое в обучении для них глоток свежего воздуха, а для меня еще один метод заинтересовать и привлечь их. Еще раз спасибо.
Vladimr, у меня тоже только текст показывает, а сетки кроссворда нет, как вы решили эту проблему?
IO*, у меня такой проблемы не было. Попробуйте без руссификации сначала разместить.
Sosnovskij, пробовала и без руссификации, отображается только
EclipseCrossword © 2000-2007
Welcome!
Click a word in the puzzle to get started.
и кнопка “check puzzle”
а в самом редакторе материала появляется сообщение:This interactive crossword puzzle requires JavaScript and a reasonably recent web browser, such as Internet Explorer 5.5 or later, Netscape 7, Mozilla, Firefox, or Safari. If you have disabled web page scripting, please re-enable it and refresh the page. If this web page is saved to your computer, you may need to click the yellow Information Bar at the top of the page to allow the puzzle to load.
IO*, у вас возможно не включен javascript в браузере. Важно еще выбрать “Interactive with Javascript” на 9-ом шаге.
Галина Борзова, Галина плиз подскажите – как Вам удалось установить кроссворд в блогСпот, я там же – но ничего не получается (только несколько строк с наименованием кросса и имени)- пожалуйста.
Кстати уточнение:
- на шаге создания – все ОК, в броузере просмотр работает – разгадываю, проверка действует – все отлично
Но стоит скопировать все в HTML – как превращается весь код в 10 строк – где только наименование кросса, имя и несколько строк обычного текста с несколькими значками – и ВСЕ.
Я смотрю у людей на BlogSpot получилось – поздравляю – подскажите КАК вам удалось – я вставляю чисто код прямо в создание HTML или что-то не так?
Заранее спасибо
Огромное спасибо! Теперь вижу – не зря подписалась на Вашу рассылку! Очень полезная информация. Я как раз давно думала, как бы создать подобный кроссворд.
Vladimr,
Владимир плиз – если не трудно – как Вам удалось вставить данный код на страницу в HTML формате. Дело в том, что у меня та же проблема – пытаюсь и так и сяк – ничего не выходит – только текст и несколько строк + несколько кодов (знаков).
Как же Вам удалось разобраться?
Посидел немного развеял свой мозг ) Интересный кроссворд.
Можно использовать для развлечения посетителей на разных проектах.
Спасибо огромное, для блоггера очень нужная вещь! Иду делать себе кроссворд, будет чем развлечь людей.
когда вставляю код ваш получается вот такая белиберда doxot.at.ua/krossvord11.html подскажите что делать
Спасибо за подробное описание, это очень актуально.
Дима, сайт вообще выдал 404 ошибку.
Я что то непоняла. Сделала на компе кроссворд, а дальше что? На сервер куда загружаем? в какую папку? и как потом на с страницу сайта его вставлять?
Нина, загрузить его можно в любое место и на странице дать ссылку на полный путь, где он находится.
Sosnovskij,
не понимаю, мы ведь работаем с вордпрессом, как и где найти этот путь
Нина, вы будете загружать файл с кроссвордом не в wordpress, а просто на хостинг. Вот путь к этому файлу и нужно показать. Если загружается кроссворд в корень сайта (там где папочки wp-admin, wp-content и так далее), то он будет доступен по адресу http://ваш-домен.ru/название-кроссворда.html.
Sosnovskij, вроде, все загрузил на сервер правильно. Должно отобразиться здесь: http://tanci-kavkaza.ru/tur/krossvord1.html
Но открывает страницу 404! Как быть?
Али, файл krossvord1.html находится в папке tur?
Sosnovskij, ага!!! Через ФТП создал папку и закинул туда krossvord1.html ((((((
Али, честно говоря, странно, что вылезает вордпрессовская 404-ошибка, а не ошибка сервера. Попробуйте закинуть файл в корень сайта или папку создать на компьютере. Также проверьте названия файлов.
Sosnovskij, и в корень закидывал. Но ничего не помогло! О какой папке вы говорите? И названия файлов написаны на английском….
Али, папку создать не на сервере, а на компьютере, а уже потом ее загрузить на хостинг.
Sosnovskij, ничего не помогает! Увы((((( очень хочется сделать у себя такое!
Али, пришлите мне файл кроссворда на почту http://sosnovskij.ru/contact/
Sosnovskij, уже послал! Спасибо Вам за то, что хотите помочь!!!
Али, все сделал правильно!
Но не выходит… все выдает страницу 404!!!
Если залить слова в базу, и сделать связку javascript-php-mysql – то получится кроссворд полностью зашифрованный.
К чему такие сложности, в варианте html кроссворда можно в исходнике просто удалить массив со словами/ответами (это если не используете вариант с автоматическим подсказками) и также можно в настройках программы EclipseCrossword перейти по кнопке Options, далее вкладка Web и там выбрать галочку Do not allow cheating – массив ответов будет формироваться пустой. Я когда изучал javascript кроссворда – удивился, нафига он нужен там вообще, ведь проверка на правильность идет по хэш-коду слова. А чтобы не париться с русификацией, я для себя немного “модифицировал” программу – внес изменения и теперь нет необходимости каждый раз выполнять пункт 10 данной статьи, все уже внутри программы
а как потом скачать его на комп.у меня страничка открывается там тот кроссворд, а дальше как?
Сашулька, там в последнем шаге как раз предлагаются варианты каким образом сохранить его на компьютер. Если он открывается у вас в браузере, то выберите пункт в нем “Сохранить страницу как” и сохраните ее на компьютере.
Sosnovskij, подскажи, а сколько максимально может вместиться слов?? у меня почему то вместилось всего 23 слова (( а нужно чтобы было 40 слов(
Подскажите, как убрать кнопку Solve . при нажатии на которую в кроссворд встает правильный ответ?
Отличная игрушка! Попробую установить на свой сайт – тема “Татуировки”. Кроссворд создал, а на сайт ещё не пробовал вставить- никогда этим не занимался. А я ничего не испорчу в настройках, если сделаю что-то не так?
Алла, можно вырезать это из файла кроссворда (редактировать html).
Сергей, не должны
Подскажите как сделать чтобы ответы не показывались в исходном коде?
Блин, сколько полезных вещей есть для своего сайта, спасибо большущее за статейку, обязательно буду делать у себя на сайте подобные штучки-дрючки, надо же как-то развлекать народ
Дима, найти их в исходном коде документа и вырезать.
К сожалению не вижу текст в 10 пункте, а именно в месте:
“, а потом после строчки:
вставить строчку: ”
Что именно вставлять и после чего не понятно. Будьте добры разьясните.
спасибо.
С уважением, Дмитрий.
Машкович Дмитрий, строчки куда-то испарились
. Добавил сейчас.
Sosnovskij,
Благодарю!
Немного ошиблись с расположением, но я разобрался!
Машкович Дмитрий, спасибо – поправил.
Спасибо большое.
Классная штука! Спасибо, Сергей. Обязательно сделаю у себя на блоге.
Сперва тоже иероглифы были. Потом шурупиками пошевелил, почитал коменты и разъяснения, в итоге поменял кодировку на UTF 8 и дело пошло. Автору респект за отличное раскрытие темы.
Посоветуйте, пожалуйста, как лучше ответы на кроссворд присылать? Я поместила кроссворд на предметном блоге, а каким образом читатели будут присылать ответы? Слова писать, скрин делать или есть ещё варианты попроще?
Мой кроссворд висит тут: http://fortee.ru/2012/01/26/for-weather-wise-pupils-and-teachers/
outofsight, скрин или все слова – неплохие варианты.
Sosnovskij, учитывая, что читатели довольно ленивы, я надеялась на какой-нибудь супер-лёгкий вариант… Боюсь, не все знают, что такое скрин, а слова нужно писать в определённом порядке. Всё равно спасибо за ответ и за то, что заходили ко мне в гости!
outofsight, можно сделать как тут:
- http://sosnovskij.ru/konkursnyj-seo-crossword/
- http://sosnovskij.ru/seo-crossword/
- http://sosnovskij.ru/crossword-bloggers/
То есть чтобы участники разгадывали конкретное слово, которое спрятано под зелеными квадратиками.
Sosnovskij, угу, всё перечитала, спасибо. Вот только руки не доходят заменить строчки в текстовом документе, не очень я в этом соображаю.
Спасибо большое. Я до этого кроссворды составляла в Ноt Potatoes, они несколько отличаются от вашего, предназначались для работы в классе.
А мой кроссворд никто пока не разгадал. Читателей у меня полно, но такие уже молчаливые… )
Вот это я искал давно спасибо, теперь буду на своем блоге радовать посетителей, разными кроссвордами.
Сергей, а как сделать в кроссворде зеленые квадратики? Просто закрасить на скрине или можно задать в программе определенные клеточки?
Вадим, зеленые квадратики это я в фотошопе делал
Привет Сергей. Залил кроссворд на хостинг через программу FileZilla , указал путь к файлу на хостинге. Но когда кликаю по ссылке открывается страница с надписью Не найдено.
Андрей, какое имя у файла, какой путь к файлу?
http://zdoroviezdorovo.ru/krossword.html – это путь к файлу, а это название файла – krossword.html Сама ссылка на кроссворд находиться в статье “Свекла защитит от болезней” в самом конце статьи.
Андрей, попробуйте залить файл на хостинг другим ftp-клиентом, либо напрямую через панель хостинга.
Сергей у меня получилось вставить кроссворд на сайт через хостинг, но теперь другая проблема. Вместо русских букв у меня отображается какая-то белиберда вот ссылка – http://zdoroviezdorovo.ru/wp-content/uploads/2011/12/krossword.html
В исходном файле все нормально отображается
Андрей, нужно поставить правильную кодировку. В 100м пункте это есть.
Лариса, на каком этапе в статье у вас не получается?
Спасибо, не ждала ответа так быстро. Мой сайт на WordPress работает. При установке кода в разделе “добавить запись” в админ панели, вместо кроссворда выходит реклама о сервисе Eclipce Crossword. но что интересно, пыталась полученный HTML код установить в разделе “виджеты”-все работает и отображается, но кроссворд не помещается в колонки виджетов…
Лариса, если вы хотите вставить кроссворд непосредственно на страницу поста в wordpres, то обратитесь к верстальщику.
Я конечно извиняюсь, но кто-такой “верстальщик”, я как-то привыкла сама все делать , нужно может быть какие-то тонкости объяснить? Спасибо .
Лариса, Верстальщик — специалист по вёрстке, то есть по компоновке текстовых, иллюстративных и вспомогательных элементов на странице документа. Это общее определение, которое характерна как для газетных изданий, так и для интернет-ресурсов
.
Подскажите как теперь разместить его на сайте ? Он устанавливается только в боковой колонке .
Pavel, почитайте пару моих комментариев выше.
Спасибо за статью огромное. Все в принципе понятно и вроде работает. Интересно другое – как можно например, вывести список первых пользователей отгадавших кроссворд?
Дмитрий, такого функционала там не придумано
Sosnovskij,
Да, но где то я видел типа конкурса для трех первых отгадавших со списком.
Дмитрий, здесь http://sosnovskij.ru/konkursnyj-seo-crossword/ наверно и видели. Там только победители не совсем технологичным способом определялись
Sosnovskij,
Да, я уже понял. Ну вот у меня висит такой кроссворд. Но как-то уныло. Никакой статистики нет. Отгадывал его кто вообще или нет?
Сергей, большое спасибо. Кроссворд – очень нужная вещь для кулинарного блога. Рецепты пробежать глазами можно за пару секунд. А кроссворды помогут развлечь посетителя, задержать его на сайте и мне плюсик пойдет.
Все таки – есть ли простой способ закрыть данные ответов на кроссворд от просмотра в файрбуге?
Спасибо.Установил на своём сайте посетителей прибавилось по НЧ про кроссворды. В этом есть и ваша заслуга,а то что ответы видны…туфта.
Дмитрий, иван, вырежьте ответы из исходного кода кроссворда.