This blogpost illustrates how to use the Exolve software to embed interactively solvable crossword puzzles into your blogposts (or other websites).
Just copy the following HTML snippet into the HTML of your blogpost or web page (the resulting puzzle is also shown in this post). You can edit the HTML of a new or existing blogpost by choosing the "< > HTML view" menu option in Blogger.
<link rel="stylesheet" type="text/css"
href="https://viresh-ratnakar.github.io/exolve-m.css"/>
<script
src="https://viresh-ratnakar.github.io/exolve-m.js">
</script>
<div id="exolve"></div>
<script>
createExolve(`
======REPLACE WITH YOUR PUZZLE BELOW======
exolve-begin
exolve-id: some-unique-alphanumeric-id
exolve-title: Replace With Title
exolve-setter: Replace With Setter
exolve-copyright: Replace with copyright notice or delete
exolve-width: 3
exolve-height: 3
exolve-grid:
000
0.0
000
exolve-across:
1 Running with placement, essentially, for single (3)
3 Oddly fluent and entertaining (3)
exolve-down:
1 Retreating thief forgot to hide bananas (3)
2 One suffering for a long time (3)
exolve-end
======REPLACE WITH YOUR PUZZLE ABOVE======
`);
</script>
You can edit the text between the "exolve-begin" and 'exolve-end" lines to specify your own puzzle. Note that instead of "0"s, you can specify the solution letters in grid squares, which will create a puzzle that allows solutions to be checked/revealed via button clicks. Exolve supports a rich variety of puzzles, letting you use:
- Blocked or barred grids, or grids using both blocks and bars.
- Linked clues.
- Puzzle preambles.
- Annotations of clue solutions.
- Customized color schemes.
- Any language.
- Diagramless puzzles.
- Jigsaw-style puzzles.
- Customized special effects through additional JavaScript.
- And much more! See the Exolve documentation for details.
To force blog readers to refresh their version of the Exolve software instead of using the cached copy (after a software update for a bug-fix, for example), you can attach any new arbitrary suffix after a question mark, to the exolve URLs in your code. For example, here we have appended "?20200802"
<link rel="stylesheet" type="text/css"
href="https://viresh-ratnakar.github.io/exolve-m.css?20200802"/>
<script
src="https://viresh-ratnakar.github.io/exolve-m.js?20200802">
</script>
No comments:
Post a Comment