1 1 1 1 1 1 1 1 1 1 Rating 5.00 (2 Votes)

Традиционное составление кроссвордов

Я помню, еще в школе, когда мама проводила различные развлекательные мероприятия, например "Веселый вечер физики" (моя мама была учителем физики), то готовилась она к составлению тематических кроссвордов примерно так:

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

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

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

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

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

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

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

После запуска программы (прежде её придется установить) можно начинать составление своего кроссворда. Из предложенных двух вариантов (верхний: создать новый кроссворд, нижний: открыть кроссворд с файла) необходимо выбрать первый вариант - либо же второй, если нам нужно просто откорректировать свой старый кроссворд, который мы сохранили ранее. После установки флажка нажимаем кнопку "Далее (Next)".

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

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

  • WORD - вставляем слово, которое будет отгадывать посетитель
  • Clue for this word - указываем описание к этому ключевому слову
  • Кнопка ADD WORD TO LIST добавит новое слово в кроссворд
  • Кнопка REMOVE WORD удалит добавленное по ошибке слово с кроссворда
  • Кнопка TOOLS разрешит сохранить слова кроссворда в список или добавить из списка сохраненного ранее

Если мы уже определились с словами и нажали кнопку NEXT (Далее) то программа заботливо предложит сохранить список введенных слов (чтобы в случае какого-то сбоя не пришлось их потом вводить заново). Мы естественно не хотим терять свое время зря - нажимаем "Да" тем самым сохраняем список введенных слов и определений нашего кроссворда в формате EWL.

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

На страничке, которая откроется можно будет задать "Заголовок" своего только что созданного кроссворда и копирайт. Поля не являются обьязательными - но я все же их заполняю. Также когда уже буду публиковать на сайте кроссворд - то смогу удалить или изменить введенную информацию уже в исходном коде.

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

В следующем окне программа выдаст окно предупреждение о том, что мол хотите ли вы создать кроссворд? Все введено верно? Мы соглашаемся нажатием кнопки Далее.

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

Если же нам не понравилось расположение, которое сразу предложила программа - то мы можем не стесняться и нажимать на ссылку "Make another puzzle like this one" - таким образом мы дадим программе команду перегенерировать расположение ключевых слов нашего кроссворда.

Если нас устраивает вариант расположения нашего кроссворда - мы соглашаемся нажимая кнопку NEXT (Далее) и на открывшемся шаге выбираем вкладку Save as a web page где для сохранения интерактивного кроссворда необходимо выбрать пункт "Interactive with JavaScript" - после чего откроется окно сохранения html файла.

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

И так на скриншоте ниже установка первого флажка уберет с странички ключевые слова, и создаст из них ХЭШ код - другими словами, отгадывать кроссворд будет возможно, но вытащить слова с исходного кода уже не получится.

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

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

СЛОВО: определение
СЛОВО2: определение 2
СЛОВО3: определение 3

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

Как интегрировать кроссворд в свой пост на WordPress (или Joomla)

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

Я решился разобрать исходный код странички кроссворда, который создала программа EclipseCrossword. Первым делом что я выделил - это стили, которые идут на страничке. Чтобы действительно они мне не мешали, я просто вынес их в отдельный файл с расширением CSS. Ниже идет этот код - при желании можно себе сразу его и скопировать и создать себе файл например style.css

@charset "utf-8";

body, h1, h2, h3, h4, h5, h6 {
	font-family: "Segoe UI", "Franklin Gothic Medium", "Arial", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	color: #5d6a86;
}
body {
	cursor: default;
	font-size: small;
}
.ecw-answerbox {
	color: black;
	background-color: #FFFAF0;
	border-color: #808080;
	border-style: solid;
	border-width: 1px;
	display: block;
	padding: .75em;
	width: 240pt;
}
.ecw-box {
	border-style: solid;
	border-width: 1pt;
	cursor: pointer;
	font-size: .12in;
	font-weight: bold;
	height: .18in;
	overflow: hidden;
	text-align: center;
	width: .18in;
}
.ecw-boxcheated_sel {
	background-color: #FFF1D7;
	border-color: #C00000;
	color: #2080D0;
}
.ecw-boxcheated_unsel {
	background-color: #ffffff;
	border-color: #606060;
	color: #2080D0;
}
.ecw-boxerror_sel {
	background-color: #FFF1D7;
	border-color: #C00000;
	color: #BF0000;
}
.ecw-boxerror_unsel {
	background-color: #FFF0F0;
	border-color: #606060;
	color: #BF0000;
}
.ecw-boxnormal_sel {
	background-color: #FFF1D7;
	border-color: #C00000;
	color: #000000;
}
.ecw-boxnormal_unsel {
	background-color: #ffffff;
	border-color: #606060;
	color: #000000;
}
.ecw-button {
	width: 64pt;
}
.ecw-cluebox {
	border-bottom-width: 1px;
	border-color: #c0c0c0;
	border-left-width: 0px;
	border-right-width: 0px;
	border-style: solid;
	border-top-width: 1px;
	margin-top: 1em;
	padding-bottom: .5em;
	padding-left: 0pt;
	padding-right: 0pt;
	padding-top: .5em;
}
.ecw-crosswordarea {
	background-color: #D0D8E0;
	border-color: #808080;
	border-style: solid;
	border-width: 2px;
	padding: .5em;
	font-family: "Segoe UI", "Verdana", "Arial", sans-serif;
	font-size: small;
}
.ecw-copyright {
	margin-bottom: 1em;
	font-size: x-small;
	font-family: "Segoe UI", "Franklin Gothic Medium", "Arial", sans-serif;
}
.ecw-input {
	font-family: "Segoe UI", "Verdana", "Arial", sans-serif;
}
.ecw-wordlabel {
	text-transform: uppercase;
	margin: 0;
}
.ecw-wordinfo {
	font-size: 8pt;
	color: #808080;
}
.ecw-worderror {
	color: #c00000;
	font-weight: bold;
	display: none;
	margin-top: 1em;
}
.takru b {
	display: none;
}

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

CrosswordWidth = 19;
	CrosswordHeight = 19;
	Words = 20;
	WordLength = new Array(6, 6, 10, 8, 6, 8, 5, 11, 9, 4, 9, 10, 6, 6, 4, 11, 8, 4, 6, 7);
	Word = new Array();
	Clue = new Array("Фамилия человека, на блоге у которого проводится ежемесячный статейный конкурс", 
"Мотивационный спикер который проводил крутой конкурс комментаторов блога", 
"Фамилия разработчика программы, с помощью которой я собираю ТОПы комментаторов с большого количества блогов", 
"Картинка, которая отличает одного участника конкурса комментаторов от другого", 
"Фамилия блоггера который выступил спонсором дуэли на клавиатурах, которая проходит на блоге Быкадорова", 
"Фамилия человека, который первым передал награду блогу Йосифовича (речь об эстафете)", 
"Фамилия комментатора, который комментировал блог Андрея Мартынова, Евгении Куварины, Анатолия Кравченко", 
"Участник конкурса комментаторов месяца на любом блоге", 
"Фамилия блоггера, который изменил мое представление о конкурсах комментаторов (он говорил, что конкурсы нужно проводить чтобы была движуха, а не ждать пока она появится)", 
"Фамилия человека у которого я выиграл 5000 рублей (1500, 2500, 1000) и информация его блога помогла мне написать дипломную работу", 
"Так называется комментарий за написание которого многие блоггеры оплачивают поощрительное вознаграждение", 
"Фамилия участника конкурса комментаторов и победителя Июля на блоге Йосифовича", 
"Фамилия авторки блога, которая в своем списке блогов, которым она передала эстафету блог Йосифовича находится на первом месте", 
"Фамилия Сергея, с которым мне приходилось встречаться в Киеве, но знакомство начиналось с критических замечаний", 
"Площадка для заработка на конкурсах комментаторов", 
"Текст, который набирают комментаторы в период участия в конкурсах комментаторов", 
"Как называется человек, принимающий участие в конкурсе комментаторов на блоге?", 
"Сколько секретов побед в конкурсах комментаторов предоставлено в одной из публикаций на блоге Йосифовича", 
"Человек, с которым у меня проходит дуэль на блоге Александра Быкадорова", 
"Любимое мероприятие которое проводится на более чем 70 блогах рунета");
	AnswerHash = new Array(22054, 71905, 74645, 74520, 73698, 73308, 90323, 38774, 18253, 21519, 21612, 27831, 50703, 70800, 25100, 3669, 10188, 2855, 8087, 5756);
	WordX = new Array(5, 12, 3, 5, 1, 11, 5, 0, 6, 1, 7, 15, 7, 5, 17, 12, 8, 3, 14, 1);
	WordY = new Array(1, 2, 4, 6, 8, 9, 11, 13, 16, 17, 18, 0, 1, 6, 7, 8, 9, 11, 11, 12);
	LastHorizontalWord = 10;
	OnlyCheckOnce = true;

Следующим идет скрипт логики нашего кроссворда, который будет рисовать табличку и позволит пользователю разгадывать кроссворд в интерактивном режиме на вашем блоге. Ниже предоставлен видоизмененный код (частично переведен на русский язык). Сохранить его необходимо в файле с расширением JS (получится к примеру файл Funcsion.JS - название можно давать любое). Этот файл будет общим для всех наших кроссвордов, он не изменяется никогда.

var BadChars = "`~!@^*()_={[}]\\|:;\"',<>/?";

var TableAcrossWord, TableDownWord;
var CurrentWord, PrevWordHorizontal, x, y, i, j;
var CrosswordFinished, Initialized;

// Check the user's browser and then initialize the puzzle.
if (document.getElementById("waitmessage") != null)
{
document.getElementById("waitmessage").innerHTML = "Пожалуйста подождите, кроссворд загружается...";

// Current game variables
CurrentWord = -1;
PrevWordHorizontal = false;

// Create the cell-to-word arrays.
TableAcrossWord = new Array(CrosswordWidth);
for (var x = 0; x < CrosswordWidth; x++) TableAcrossWord[x] = new Array(CrosswordHeight);
TableDownWord = new Array(CrosswordWidth);
for (var x = 0; x < CrosswordWidth; x++) TableDownWord[x] = new Array(CrosswordHeight);
for (var y = 0; y < CrosswordHeight; y++)
for (var x = 0; x < CrosswordWidth; x++)
{
TableAcrossWord[x][y] = -1;
TableDownWord[x][y] = -1;
}

// First, add the horizontal words to the puzzle.
for (var i = 0; i <= LastHorizontalWord; i++)
{
x = WordX[i];
y = WordY[i];
for (var j = 0; j < WordLength[i]; j++)
{
TableAcrossWord[x + j][y] = i;
}
}

// Second, add the vertical words to the puzzle.
for (var i = LastHorizontalWord + 1; i < Words; i++)
{
x = WordX[i];
y = WordY[i];
for (var j = 0; j < WordLength[i]; j++)
{
TableDownWord[x][y + j] = i;
}
}

// Now, insert the crossword table.
document.writeln("<table id=\"crossword\" cellpadding=\"0\" cellspacing=\"0\" style=\"display: none; border-collapse: collapse;\">");
for (var y = 0; y < CrosswordHeight; y++)
{
document.writeln("<tr>");
for (var x = 0; x < CrosswordWidth; x++)
{
if (TableAcrossWord[x][y] >= 0 || TableDownWord[x][y] >= 0)
document.write("<td id=\"c" + PadNumber(x) + PadNumber(y) + "\" class=\"ecw-box ecw-boxnormal_unsel\" onclick=\"SelectThisWord(event);\">&nbsp;</td>");
else
document.write("<td><\/td>");
}
document.writeln("<\/tr>");
}
document.writeln("<\/table>");

// Finally, show the crossword and hide the wait message.
Initialized = true;
document.getElementById("waitmessage").style.display = "none";
document.getElementById("crossword").style.display = "block";
}

// * * * * * * * * * *
// Event handlers

// Raised when a key is pressed in the word entry box.
function WordEntryKeyPress(event)
{
if (CrosswordFinished) return;
// Treat an Enter keypress as an OK click.
if (CurrentWord >= 0 && event.keyCode == 13) OKClick();
}

// * * * * * * * * * *
// Helper functions

// Called when we're ready to start the crossword.
function BeginCrossword()
{
if (Initialized)
{
document.getElementById("welcomemessage").style.display = "";
document.getElementById("checkbutton").style.display = "";
}
}

// Returns true if the string passed in contains any characters prone to evil.
function ContainsBadChars(theirWord)
{
for (var i = 0; i < theirWord.length; i++)
if (BadChars.indexOf(theirWord.charAt(i)) >= 0) return true;
return false;
}

// Pads a number out to three characters.
function PadNumber(number)
{
if (number < 10)
return "00" + number;
else if (number < 100)
return "0" + number;
else
return "" + number;
}

// Returns the table cell at a particular pair of coordinates.
function CellAt(x, y)
{
return document.getElementById("c" + PadNumber(x) + PadNumber(y));
}

// Deselects the current word, if there's a word selected. DOES not change the value of CurrentWord.
function DeselectCurrentWord()
{
if (CurrentWord < 0) return;
var x, y, i;

document.getElementById("answerbox").style.display = "none";
ChangeCurrentWordSelectedStyle(false);
CurrentWord = -1;

}

// Changes the style of the cells in the current word.
function ChangeWordStyle(WordNumber, NewStyle)
{
if (WordNumber< 0) return;
var x = WordX[WordNumber];
var y = WordY[WordNumber];

if (WordNumber<= LastHorizontalWord)
for (i = 0; i < WordLength[WordNumber]; i++)
CellAt(x + i, y).className = NewStyle;
else
for (i = 0; i < WordLength[WordNumber]; i++)
CellAt(x, y + i).className = NewStyle;
}

// Changes the style of the cells in the current word between the selected/unselected form.
function ChangeCurrentWordSelectedStyle(IsSelected)
{
if (CurrentWord < 0) return;
var x = WordX[CurrentWord];
var y = WordY[CurrentWord];

if (CurrentWord <= LastHorizontalWord)
for (i = 0; i < WordLength[CurrentWord]; i++)
CellAt(x + i, y).className = CellAt(x + i, y).className.replace(IsSelected ? "_unsel" : "_sel", IsSelected ? "_sel" : "_unsel");
else
for (i = 0; i < WordLength[CurrentWord]; i++)
CellAt(x, y + i).className = CellAt(x, y + i).className.replace(IsSelected ? "_unsel" : "_sel", IsSelected ? "_sel" : "_unsel");
}

// Selects the new word by parsing the name of the TD element referenced by the
// event object, and then applying styles as necessary.
function SelectThisWord(event)
{
if (CrosswordFinished) return;
var x, y, i, TheirWord, TableCell;

// Deselect the previous word if one was selected.
document.getElementById("welcomemessage").style.display = "none";
if (CurrentWord >= 0) OKClick();
DeselectCurrentWord();

// Determine the coordinates of the cell they clicked, and then the word that
// they clicked.
var target = (event.srcElement ? event.srcElement: event.target);
x = parseInt(target.id.substring(1, 4), 10);
y = parseInt(target.id.substring(4, 7), 10);

// If they clicked an intersection, choose the type of word that was NOT selected last time.
if (TableAcrossWord[x][y] >= 0 && TableDownWord[x][y] >= 0)
CurrentWord = PrevWordHorizontal ? TableDownWord[x][y] : TableAcrossWord[x][y];
else if (TableAcrossWord[x][y] >= 0)
CurrentWord = TableAcrossWord[x][y];
else if (TableDownWord[x][y] >= 0)
CurrentWord = TableDownWord[x][y];

PrevWordHorizontal = (CurrentWord <= LastHorizontalWord);

// Now, change the style of the cells in this word.
ChangeCurrentWordSelectedStyle(true);

// Then, prepare the answer box.
x = WordX[CurrentWord];
y = WordY[CurrentWord];
TheirWord = "";
var TheirWordLength = 0;
for (i = 0; i < WordLength[CurrentWord]; i++)
{
// Find the appropriate table cell.
if (CurrentWord <= LastHorizontalWord)
TableCell = CellAt(x + i, y);
else
TableCell = CellAt(x, y + i);
// Add its contents to the word we're building.
if (TableCell.innerHTML != null && TableCell.innerHTML.length > 0 && TableCell.innerHTML != " " && TableCell.innerHTML.toLowerCase() != "&nbsp;")
{
TheirWord += TableCell.innerHTML.toUpperCase();
TheirWordLength++;
}
else
{
TheirWord += "&bull;";
}
}

document.getElementById("wordlabel").innerHTML = TheirWord;
document.getElementById("wordinfo").innerHTML = ((CurrentWord <= LastHorizontalWord) ? "По горизонтали, " : "По вертикали, ") + WordLength[CurrentWord] + " букв(-ы).";
document.getElementById("wordclue").innerHTML = Clue[CurrentWord];
document.getElementById("worderror").style.display = "none";
document.getElementById("cheatbutton").style.display = (Word.length == 0) ? "none" : "";
if (TheirWordLength == WordLength[CurrentWord])
document.getElementById("wordentry").value = TheirWord.replace(/&AMP;/g, '&');
else
document.getElementById("wordentry").value = "";

// Finally, show the answer box.
document.getElementById("answerbox").style.display = "block";
try
{
document.getElementById("wordentry").focus();
document.getElementById("wordentry").select();
}
catch (e)
{
}

}

// Called when the user clicks the OK link.
function OKClick()
{
var TheirWord, x, y, i, TableCell;
if (CrosswordFinished) return;
if (document.getElementById("okbutton").disabled) return;

// First, validate the entry.
TheirWord = document.getElementById("wordentry").value.toUpperCase();
if (TheirWord.length == 0)
{
DeselectCurrentWord();
return;
}
if (ContainsBadChars(TheirWord))
{
document.getElementById("worderror").innerHTML = "Вводим только буквы!";
document.getElementById("worderror").style.display = "block";
return;
}
if (TheirWord.length < WordLength[CurrentWord])
{
document.getElementById("worderror").innerHTML = "Мало букв. Слово состоит из " + WordLength[CurrentWord] + " букв(-ы).";
document.getElementById("worderror").style.display = "block";
return;
}
if (TheirWord.length > WordLength[CurrentWord])
{
document.getElementById("worderror").innerHTML = "Много букв. Слово состоит из " + WordLength[CurrentWord] + " букв(-ы).";
document.getElementById("worderror").style.display = "block";
return;
}

// If we made it this far, they typed an acceptable word, so add these letters to the puzzle and hide the entry box.
x = WordX[CurrentWord];
y = WordY[CurrentWord];
for (i = 0; i < TheirWord.length; i++)
{
TableCell = CellAt(x + (CurrentWord <= LastHorizontalWord ? i : 0), y + (CurrentWord > LastHorizontalWord ? i : 0));
TableCell.innerHTML = TheirWord.substring(i, i + 1);
}
DeselectCurrentWord();
}

// Called when the "check puzzle" link is clicked.
function CheckClick()
{
var i, j, x, y, UserEntry, ErrorsFound = 0, EmptyFound = 0, TableCell;
if (CrosswordFinished) return;
DeselectCurrentWord();

for (y = 0; y < CrosswordHeight; y++)
for (x = 0; x < CrosswordWidth; x++)
if (TableAcrossWord[x][y] >= 0 || TableDownWord[x][y] >= 0)
{
TableCell = CellAt(x, y);
if (TableCell.className == "ecw-box ecw-boxerror_unsel") TableCell.className = "ecw-box ecw-boxnormal_unsel";
}

for (i = 0; i < Words; i++)
{
// Get the user's entry for this word.
UserEntry = "";
for (j = 0; j < WordLength[i]; j++)
{
if (i <= LastHorizontalWord)
TableCell = CellAt(WordX[i] + j, WordY[i]);
else
TableCell = CellAt(WordX[i], WordY[i] + j);
if (TableCell.innerHTML.length > 0 && TableCell.innerHTML.toLowerCase() != "&nbsp;")
{
UserEntry += TableCell.innerHTML.toUpperCase();
}
else
{
UserEntry = "";
EmptyFound++;
break;
}
}
UserEntry = UserEntry.replace(/&AMP;/g, '&');
// If this word doesn't match, it's an error.
if (HashWord(UserEntry) != AnswerHash[i] && UserEntry.length > 0)
{
ErrorsFound++;
ChangeWordStyle(i, "ecw-box ecw-boxerror_unsel");
}
}

// If they can only check once, disable things prematurely.
if ( OnlyCheckOnce )
{
CrosswordFinished = true;
document.getElementById("checkbutton").style.display = "none";
}

// If errors were found, just exit now.
if (ErrorsFound > 0 && EmptyFound > 0)
document.getElementById("welcomemessage").innerHTML = ErrorsFound + (ErrorsFound > 1 ? " ошибок" : " ошибка") + " and " + EmptyFound + (EmptyFound > 1 ? " слов(а) осталось разгадать" : " слово осталось разгадать") + " found.";
else if (ErrorsFound > 0)
document.getElementById("welcomemessage").innerHTML = ErrorsFound + (ErrorsFound > 1 ? " ошибок" : " ошибка") + " found.";
else if (EmptyFound > 0)
document.getElementById("welcomemessage").innerHTML = "Нет ошибок, но еще " + EmptyFound + (EmptyFound > 1 ? " слов(а) осталось разгадать" : " слово осталось разгадать") + " .";

if (ErrorsFound + EmptyFound > 0)
{
document.getElementById("welcomemessage").style.display = "";
return;
}

// They finished the puzzle!
CrosswordFinished = true;
document.getElementById("checkbutton").style.display = "none";
document.getElementById("congratulations").style.display = "block";
document.getElementById("welcomemessage").style.display = "none";
}

// Called when the "cheat" link is clicked.
function CheatClick()
{
if (CrosswordFinished) return;
var OldWord = CurrentWord;
document.getElementById("wordentry").value = Word[CurrentWord];
OKClick();
ChangeWordStyle(OldWord, "ecw-box ecw-boxcheated_unsel");
}

// Returns a one-way hash for a word.
function HashWord(Word)
{
var x = (Word.charCodeAt(0) * 719) % 1138;
var Hash = 837;
var i;
for (i = 1; i <= Word.length; i++)
Hash = (Hash * i + 5 + (Word.charCodeAt(i - 1) - 64) * x) % 98503;
return Hash;
}

Следующий файл, который я также создал - вы же можете не создавать, а использовать предложенный программой-генератором код. Это будет также файл с расширением JS в котором будет содержаться только одна строчка. Назову этот файл BeginCrossword.JS (содержимое файла по тексту ниже)

BeginCrossword();

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

<style type="text/css">
@import url("http://blog.yosyfovych.te.ua/CrossWord/style.css");
}
</style>
<script type="text/javascript" charset="UTF-8" src="http://blog.yosyfovych.te.ua/CrossWord/KROSS1.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://blog.yosyfovych.te.ua/CrossWord/Funcsion.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://blog.yosyfovych.te.ua/CrossWord/BeginCrossword.js"></script>

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

<style type="text/css">
@import url("http://blog.yosyfovych.te.ua/CrossWord/style.css");
}
</style>

<h1>Заголовок нашего кроссворда</h1>
<p>Описание</p>
<div id="waitmessage" class="ecw-answerbox"> Включите Скрипты </div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="ecw-crosswordarea"><script type="text/javascript" charset="UTF-8" src="http://blog.yosyfovych.te.ua/CrossWord/KROSS1.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://blog.yosyfovych.te.ua/CrossWord/Funcsion.js"></script></td>
<td valign="top" style="padding-left: 1em;"><div class="ecw-copyright"> <a href="http://blog.yosyfovych.te.ua/" onclick="this.target='_blank'" style="font-weight: bold;">Юрий Йосифович</a> &copy; 2015 </div>
<div id="welcomemessage" class="ecw-answerbox" style="display:none;"><h3>Привет!</h3><p>Прежде чем начать отгадывать кроссворд нужно КЛИКНУТЬ!</p></div>
<div id="answerbox" class="ecw-answerbox" style="display:none;">
<h3 id="wordlabel" class="ecw-wordlabel">&nbsp; </h3>
<div id="wordinfo" class="ecw-wordinfo"> </div>
<div id="wordclue" class="ecw-cluebox"> </div>
<div style="margin-top: 1em;">
<input class="ecw-input" id="wordentry" type="text" size="24" style="font-weight: bold; text-transform:uppercase;" onkeypress="WordEntryKeyPress(event)" onchange="WordEntryKeyPress(event)" />
</div>
<div id="worderror" class="ecw-worderror"></div>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:1em;">
<tbody>
<tr>
<td><button id="cheatbutton" type="button" class="ecw-input ecw-button" onclick="CheatClick();">SOLVE</button></td>
<td align="right"><button id="okbutton" type="button" class="ecw-input ecw-button" onclick="OKClick();" style="font-weight: bold;">OK</button>
&nbsp;
<button id="cancelbutton" type="button" class="ecw-input ecw-button" onclick="DeselectCurrentWord();">ОТМЕНА</button></td>
</tr>
</tbody>
</table>
</div>
<div id="congratulations" class="ecw-answerbox" style="display:none;"> <h3>Поздравляю!</h3> <p>Вы отгадали первый тестовый кроссворд на блоге Йосифовича. </p> <p>Подписывайтесь на обновления блога, чтобы не пропустить новые выпуски кроссвордов!</p> </div></td>
</tr>
</table>
<div style="margin-top: 1em;">
<button id="checkbutton" type="button" onclick="CheckClick();" style="display: none;">Проверить решение кроссворда</button>
</div>
<script type="text/javascript" charset="UTF-8" src="http://blog.yosyfovych.te.ua/CrossWord/BeginCrossword.js"></script>

Думаю, о том, что залить созданные файлы, и изменить ссылки вам не нужно напоминать? На этом у меня все - надеюсь помог!

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

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


Защитный код
Обновить

Комментарии   

Станислав
0 # Станислав 30.07.2016 15:39
Для того, чтобы составить кроссворд я пользуюсь этим методом, а вот вывожу кроссворд на сайте плагином Responsive Crossword Puzzle Game. Как по мне, так выглядит симпатичнее. Результат работы плагина можно посмотреть здесь: http://russkiiyazyk.ru/category/interesno/krossvordy
Ответить | Сообщить модератору
Татьяна Сова
0 # Татьяна Сова 11.03.2015 14:15
Кстати, нужно и мне подумать над тем, что бы кроссвордики у себя на блоге делать). Спасибо за подсказку и разжевывания материала по программке!
Вот еще раз убеждаюсь, столько у тебя интересного, Юра, материала на блоге!!! :-)

Ой, так здорово без капчи, прямо кайф!!!!!! И что же я раньше не регистрировалась! ;-)
Ответить | Сообщить модератору
Юрий Йосифович
0 # Юрий Йосифович 11.03.2015 15:26
Спасибо Таня.
Руководство писал в первую очередь для того, чтобы для себя иметь шаблоны под руками и не хранить отдельные папочки на компьютере.
Думаю, может еще кому-то пригодятся - так как кроссворды здорово поднимают ПФ - а это сейчас очень важно в плане продвижения сайта.
Ответить | Сообщить модератору
Ольга Андреева
+1 # Ольга Андреева 23.02.2015 15:04
Я как-то тоже решила придумать кроссворд. Создала. Но потом что-то не получалось его поставить на блог. Нужно было или на хостинг закидывать в папку блога. Не помню. Так и бросила эту затею. хотя мне очень хотелось . чтобы на блоге были кроссворды.
Ответить | Сообщить модератору
Юрий Йосифович
0 # Юрий Йосифович 24.02.2015 06:50
Для того, чтобы разобраться с этим вопросом и была написана эта публикация.
Самое сложное, это собрать слова, написать определения, при этом это можно делать в обычном блокноте в формате "СЛОВО: определение" - а потом импортировать в программу.

Относительно всего остального - то сложностей быть не должно - мне вообще понравился процесс составления кроссвордов и их публикация.

Не обязательно вообще что-то там заливать на сервер - можно сразу вставлять код в публикацию - но мне удобнее все же разделять скрипты на части и заливать их отдельно на хостинг...
Ответить | Сообщить модератору
Андрей Косолапов
0 # Андрей Косолапов 09.03.2015 20:47
Ольга, с прошедшим праздником 8 марта! У меня тоже не получалось и не получается, вставлять кроссворд на блог. Вот поэтому, я использую готовую форму для отдельной страницы. Наверное надо будет написать про это, если что, дня через два загляните, решение легкое. И если воплотите в жизнь, то у Вас на блоге, появятся кроссворды. :)
Ответить | Сообщить модератору
Юрий Йосифович
0 # Юрий Йосифович 11.03.2015 15:26
Интересно, а почему же Андрей не получается вставлять кроссворд в страничку, в чем собственно сложности заключаются?
Ответить | Сообщить модератору
Андрей Косолапов
0 # Андрей Косолапов 11.03.2015 16:26
Юра, черт его знает. Вот сегодня, завтра, статью пишу, вернее заканчиваю. Хочешь верь, хочешь нет, но у меня не получилось. Отдельно, до, в редакторе вордпресс, нет.
Ответить | Сообщить модератору
Юрий Йосифович
0 # Юрий Йосифович 14.03.2015 13:01
Я статью смотрел.
Но так и не понял, почему не получилось разместить кроссворд внутри публикации.
Я что где-то ошибку допустил в посте и способ, описанный выше не работает?

Ответить | Сообщить модератору
Андрей Косолапов
0 # Андрей Косолапов 14.03.2015 16:28
Юра, ты тут не причем. У меня тоже есть статья про кроссворд,( можно сказать чуть ли не от самого автора,) его видео.



Вот как раз в нем, он и предупреждает, что вордпресс, может обрезать код. То есть надо тупо вставить кроссворд и нажать опубликовать. А то как он встанет в статью никого не касается. Вот я после первой неудачной попытки, просто создал страничку с кроссвордом, вот как то так. Если честно, то у тебя статья круче, Ты еще и файл разбил на части.
Ответить | Сообщить модератору
Юрий Йосифович
0 # Юрий Йосифович 14.03.2015 17:30
Так не в крутости статьи дело - если ты внутри статьи умудряешься установить рекламу, то попробуй описанным мною способом вставить код в виде Java скриптов вынесенных в отдельные файлы (тогда WP не должен бы добавлять форматирование внутри скрипта - а значит будет работать).

Вот если что просто тупо скопировал код шаблона и вставил на только что созданный сайт WP - все работает (чуть не так как бы хотелось, но работает - подкорректировав чуток под себя код вывода все будет работать как нужно).

Пример работы кроссворда на WP
Ответить | Сообщить модератору
Андрей Косолапов
0 # Андрей Косолапов 14.03.2015 17:50
Юра, так рекламу поставить много ума не надо. Перешел с визуального редактора на текст и все. Так что знаешь, не хочу заморачиваться еще и с этим. Пусть будет как есть, тем более что кроссвордов я много не делаю. Хотя ради эксперимента, может быть как то и попробую.
Ответить | Сообщить модератору
Юрий Йосифович
0 # Юрий Йосифович 14.03.2015 17:59
Точно так я и сделал - скопировал у себя шаблон, зарегистрировал сайт на WP и убедился, что все работает как надо (есть проблема с пропорциями, но она решается уменьшением размера клеток в стилях).

Если смотрел по ссылке выше, то понимаешь, что предложенный способ все же дает возможность внедрить кроссворд в публикацию даже на Wordpress.

По поводу заморочек - так заморочек тут нет никаких - один раз создал шаблон - а далее только подставляешь номер скрипта-кроссворда.

Но для того, чтобы понять принцип и разобраться с тем, что заморочек я не предлагаю, нужно внимательно прочитать публикацию - а тут много букАф....
Ответить | Сообщить модератору
Андрей Косолапов
0 # Андрей Косолапов 14.03.2015 18:16
Ну прости засранца, просто читал не сильно внимательно, зато извлек пользу из нашего диалога.
Ответить | Сообщить модератору