hz-crossword is an haztivity resource wrapper for jq-crossword
hz-crossword uses jq-crossword under the hood.
npm i --save @haztivity/hz-crossword
- JQuery
- jq-crossword
- @haztivity/core
- Import @haztivity/hz-crossword
- Add HzCrossword to the page
- Set
data-hz-resource="HzCrossword"
import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzCrosswordResource} from "@haztivity/hz-crossword";
export let page: PageRegister = PageFactory.createPage(
{
name: "myPage",
resources: [
HzCrosswordResource
],
template: template
}
);div
-
var definition = {
"height":8,//height of the board, 8 cells
"width":5,//width of the board, 5 cells
"acrossClues":[
{
"number":1, //number to identify the world, must be unique
"x":1,//The x position where the word starts, starting from 1
"y":2,//The y position where the word starts, starting from 1
"answer":"Hello",//the word itself
"clue":"A common greeting",//the clue
"hints":[2],//the letter 'e' is a hint. Starting from 1
},
{
"number":2,
"x":3,
"y":5,
"answer":"Old",
"clue":"Having lived for a long time; no longer young."
}
],
"downClues":[
{
"number":1,//this clue starts in the same cell that "Hello", so it must have the same number
"x":1,
"y":2,
"answer":"History",
"clue":"The study of past events, particularly in human affairs.",
"hints":[2,7]
},
{
"number":3,
"x":5,
"y":1,
"answer":"World",
"clue":"The earth is our _____"
}
]
}
div(data-hz-resource="HzCrossword", data-opt-jq-crossword-definition=definition)
All the options of jq-crossword except functions could be specified by attributes using:
data-opt-jq-crossword-[option]=[value]If the option have multiple words, use dashes, for example acrossListTitle have to be provided as across-list-title
For more info please visit jq-crossword
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent