viresh-ratnakar / exolve Goto Github PK
View Code? Open in Web Editor NEWOnline interactive crossword software in JavaScript
License: MIT License
Online interactive crossword software in JavaScript
License: MIT License
This was originally framed by https://github.com/Antagony1060 like this:
It's just occurred to me that providing 'solved' answers in a puzzle is slightly problematic presently. Because, unlike with questions, there is nowhere to put the answers, except as part of annotations. Perhaps you could create a mechanism based on putting answers in curly brackets say, immediately after the enumeration – which, if present, enables the 'Reveal this' button and using that puts the answer into the input field? Just a thought…
And this:
I realise my earlier suggestion to somehow link matched answers with clues is probably a tall order and likely prone to user input errors, but I've been playing around with this new feature a lot – I've almost got a puzzle ready for publication – and the disconnectedness of the three main elements, grid, clue list, and the overhead clue bar, feels like it could be a little confusing for some users. In fact I was just thinking if only the latter two were tied together it might be enough to address that issue.
My current thinking is to allow (in a puzzle with solutions that has nodir clues without cell associations specified) cell associations for nodir clues to be provided (only for revelations through reveal-this and reveal-all) like this:
[P 18d] This clue goes on ... (6)
and/or like this:
[Q #a14 #b15 #c16] Up and away blah... (3)
Then, once the clue has been "reveal"ed, we can grab the solution letters from the right cells, highlight them as well as fill them into the placeholder slot.
Hi!
A feature request which for me should make it better with "turning words". And instead of asking for options with Arrows, I ask for a generic version...
https://fripp.changeip.org/melodikryss/melodikryss1/index_clues.html
You can see how I use the numbering corner to solve this, but actually I would prefer to have something like this:
exolve-grid:
0.0000000.
0{↳}00..0.000
....
Perhaps the down right corner is the best place...
Hope it is OK to ask for features... as I hope you already notice I think your program is excellent!
/Erik S
Firefox version: 68.1.1 – I've also tested it in Firefox Focus and it's the same in that.
It also repeats the first letter typed, instead of entering the new one. I've tested it with several keyboards – including Gboard, Swiftkey, Swype, and Simple Keyboard – and all but the last one suffered the same problem, but the backspace key doesn't work in that one for some reason.
Terrific work on this, by the way! So simple to use and adding bars and hyphens based on the enumeration works a treat.
exolve.html
just to add a line exolve-language: sv Latin
after the line with exolve-id
.I expected the "Å" to just be added without any jumping around, so the middle north cell should be current. (Other "special" letters "Ä" and "Ö" seem to work fine.)
Is there a way to show linked clues in Exolve?
I think most users would prefer them to be left in. But if you'd like to keep it as an option, maybe you could clear them if they're all that exists? In other words, two successive clicks would clear the whole set.
Hi!
I like to type in the answers during the creation phase, but then in my final version I want to just have it "clean" with zeroes.
I was just about to write a super simple pythonscript to do it, but then realized that you perhaps have some kind of solution for it.
Or can do... perhaps better that parsing the code externally, you could create a function which exposed a "exolve-grid" without answers. Of course not normally activated, but possible for puzzle creators to temporary activate.
perhaps this is a bit strange request... but I would be happy with it :-)
I have a grid with solutions provided and want to know when the user has successfully completed the crossword so I can display some custom markup on the screen (Congratulations! etc).
How can I do this please? either through an event or class etc ?
It would be nice to have a dedicated button that "Submits" without removing errors (appreciate this is similar to submit button when solutions are not provided). The crossword/page could then tell the user there are errors but not tell them where. In other words, keep them guessing. The answer to the above could then be used to give them a "Sorry, you haven't solved it" or a Success message. It might also be nice to have a message within the control that is has a configurable success\failure message
My current attempt is below, which relies on the number of xlv-solved classes being correct
document.getElementById("xlv1-check-all").addEventListener("click", function() {
var cluesAcross = document.getElementById('xlv1-across').childNodes.length;
var cluesDown = document.getElementById('xlv1-down').childNodes.length;
var solvedClues = document.querySelectorAll("tr.xlv-solved");
var resultElement = document.getElementById('crosswordResult');
if(solvedClues.length == (cluesAcross + cluesDown)){
//Success
console.log('success');
resultElement.innerText = "Success! Rearrange the highlighted letters to find the password."
}
else {
//Failure
console.log('fail');
resultElement.innerText = "Not quite right yet! Please try again!"
}
});
Thanks for your crossword app. Enjoying it.
When you backspace through a linked clue and land on a shared end-point (for eg, 1ac ends where 3dn begins, and 1ac is linked to 3dn), you cannot backspace further unless you click to toggle the direction. I had not implemented backspacing across linked clues, which seems like an OK thing in general, except for this "shared end-point" situation.
Alphanumeric characters like 0 are often used in rebus grids.
e.g. have a little checkmark next to the clue number if the light has been fully filled in, or change the colour of the clue text
I am very pleased with the new (v80.0) responsive behaviour for mobiles. However, having just checked a few puzzles on my phone, I have found this problem (from my Alphabetical Jigsaw puzzle):
I also checked the mobile device toolbar in Chrome's (Windows) dev tools and found it shows the same issue when using one of the built in devices, the Galaxy S5:
Version: exolve v0.15 August 5 2019, User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
When attempting to print a puzzle from the Edge browser, the Print Preview shows only the first page, or the first page and a few lines of the second page. So some or all of the questions and clues are omitted.
Different results can be obtained by changing the settings in Edge's print dialog (namely Orientation, Scale, Margins). At 50% scale, usually the whole puzzle fits on one page and prints completely. However, 50% results in unpleasantly small type. 75% scale results in a pleasant size, but truncated printing, as described above. (Unfortunately Edge does not allow scales in between 50% and 75%.)
The most desirable behavior would be for exolve to provide a "print view" of a puzzle that is laid out to fit on one page in most cases. For example, to save space, the introductory text could be tighter spaced and the questions could be to the right of the grid.
In this mini-puzzle I'm testing, where the first clue is a three word entry spanning four lights, after typing the first word input jumps to the second light as expected, but it doesn't jump again after that.
It's also drawn a couple of unnecessary line bars adjacent to black squares, so you may want to take a look at that as well.
Further to our discussion on reddit, where you said:
If there are HTML changes that seem aesthetically better, I am happy to consider applying them to Exolve itself!
Well there is a small change I make to the body HTML in our grids that I'd forgotten about: I comment out the <hr/>
line at 201 and the two <br/>
lines at 209/210 (exolve-m.html v0.30) to remove the empty space between grid and clues. I guess that's created for elements we don't use, such as exolve-question
, but I think it looks a lot better without it when it's unused. Could you maybe just insert those tags when they're required?
Pardon my ignorance but I need a way to test submit. I have coded exolve-submit as instructed and it works, but you seem to have made submits one-time-only and I can't work out from your code how that is done.
For me as a setter, what's the best way to be able to do several submits, eg in order to test my Google form or my correct solutions spreadsheet? I know how to use developer tools in the browser to delete a cookie but that doesn't seem to be the switch.
I modified the code slightly for my purposes, and if a particular clue is solved the clue gets permanently shaded by green. However if one unintentionally, rewrites a portion of the solved clue, making it incorrect, still the clue "appears" solved i.e. the green shade remains. Looks like "Check All" button can actually fix this, but can we call the button from time to time, so that the unintentional mistakes don't ruin it.
Here is a screen-recording of what I tried to do!
https://share.getcloudapp.com/BluOB6oZ
This would allow simplifying of annotations. It's also how most parsing sites work nowadays, wherein they only expand on a definition in the explanation part as necessary.
To implement it I would suggest a default double character tag, like tilde (~~) perhaps – e.g. ~~The two~~ barbarians occasionally traded human heads (4) – so the setter can always use the chosen character singly within their clues, if desired. Either that or use a single character tag but provide an override/specify option.
Of course there may be edge cases where a setter wishes to underline part of a clue themself, which is why I suggested “or otherwise highlight” in the title. Could there maybe be a ‘definition background colour’ option for example?
Hi Viresh. This is a great app, thanks for doing this!
I can't seem to get exolve-option: clues-panel-lines to work..
Here is what I type:
exolve-option: clues-panel-lines:2
As soon as I insert this code, I get a mostly blank page, like the attached screenshot... I have tried v0.86 and v0.87, chrome and firefox, and a couple of different puzzles.
Hope I am not just doing something dumb..
When the JavaScript is in a separate file (as in exolve-m.js), the HTML file should use a manifest file to allow filling the grid even when offline.
Hi!
A Feature request which perhaps sounds a bit specialized... But for my music quizes which try to follow swedish national radio "musikkrysset" standard, it would be very convenient.
You can see "Sveriges Radio" solution here:
https://sverigesradio.se/sida/artikel.aspx?programid=2078&artikel=723047
And they don't even have any support for turning words entries. I have a mission to make them fix that, and one way should be to recommend them using your program. I think they have 1.7 million listeners every saturday :-)
And I think many users should miss your wonderful feature of following the no-dir-clues direction when they enter words, if they have to click three times to get to "no-dir-clues-mode"
Test:
https://fripp.changeip.org/melodikryss/melodikryss1/index_clues.html
And click on no-dir-clue 21. You need to click three times to get to the one "you want"
/Erik S
Could it have tab and shift-tab to jump between next/previous clues, as ordered in the clue lists. They do this with the Guardian crossword and it's easily the best way to navigate their grids, I find.
Could the automatic jump from the end of a light to the next open square on the row, be optional? I personally find it more annoying than useful and have to navigate back to the previous light most times.
Last but not least: it could do with a simple keyboard method to change direction. From 1a in your Fifteen Puzzles grid for example, getting to 1d is not straightforward without the mouse. The fewest number of key presses I could manage it in was 9! Now you might ask, "what's wrong with using the mouse?" Well nothing, except that filling a crossword is typing, which most people use both hands for, so having to switch to the mouse, even if infrequently, can be a distraction/annoyance. Since the 'Enter' key isn't usually used for any purpose in filling crosswords, might I suggest using that?
I was updating an ongoing competition puzzle and I wanted to see if the new entry's author had a previous entry, but the only way to tell from the UI was to select each clue one-at-a time and click 'Reveal'. It got me wondering what is the point of hiding annotations when the solutions are on display?
I think this would also be a good feature for anyone who'd like to provide separate pages with pre-filled solutions for their puzzles.
Version: Exolve v0.66 April 16 2020, User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0
The links for 18 and 19 across are swapped in the /r/crosswords Community AOTW Crossword 1
Going through some boxes in my loft the other day, I found this old Araucaria puzzle I'd cut out of the paper long ago and evidently forgotten about. As you can see, it is a prize 'special' that requires solving the alphabetical list of clues prior to entering them, 'jigsaw-wise', into the grid. He used to create two or three of these every year back in the day. In fact I believe he may even be credited with inventing the format.
Anyway, it got me wondering whether it would be possible to create an Exolve version of a puzzle like this, so I had a go.† Assuming I haven't missed a better way to do this, I think it kind of works but it's not quite as intuitive or convenient as I would have hoped. So I thought about what might improve it, and I reckon the ideal way would be to have answer placeholders directly underneath each related clue – so basically doing away with the need to create a separate disconnected set of questions below.
Another nicety would be to have a little button next to the placeholders – only enabled when logically applicable – to enter the given answer into the currently selected light in the grid.
Is this something you might consider doing? If so, from an Exolve user's perspective I think it would be most convenient to simply make it a single global option, so that every clue gets affected. Although I can imagine scenarios where one might want it for only a subset of clues, in which case it would need to be a clue-by-clue setting.
† In case of any copyright issues I've deleted the original interactive file and replaced the link with a picture of it instead.
Edit: not that you need it, but here's a mock-up picture of how I imagine it might look:
Given a 5x5 grid with the answer to 1a linking to 3d:
exolve-grid:
00000
0.0.0
00000
0.0.0
00000
exolve-across:
1,3 The clue… (5,5)
it throws the error 'loop in successor for 0,4'.
I've played around with it a bit and as far as I can tell it only occurs when the square in the top-right corner of the grid is shared between two successive chained lights. For example: in a larger grid with two lights on the top row, the error only occur if the chain order is 1a,2a,3d. Both 2a,1a,3d and 1a,3d,2a work fine.
Hi again. Again a bit esoteric demand... but for me as a music quiz/crossword creater it is rather important.
My "musikkryss" is planned with a specific order of songs. So I want the "next-button" to move to the next clue (song) even if the last one was "across" and the next one happens to be "down".
You have made it very flexibel were I can change across, down, and nodir. And I can also often achive this with changing if a light is a reference to something or something else refering to it (in grouped lights). But I can't achive what I want -- genric order.
I would be perfectly happy with some concrete examples how I can achive this with some really ugly functions in customizeExolve to reorder it, because I understand that you don't wan't to add some extra notation for just this demand.
Anyway. It would really bli great for melody crosswords makers.
Thanks!
/Erik S
In cyrillic languages alphanumeric characters is from cyrillic 'А' to latin 'Z'. Something like this: а-яА-ЯёЁa-zA-Z. And so puzzle don't working with russian or ukrainian words.
Issue: The clue displayed above the grid gets split and spans multiple lines and ends up covering part of the grid. This does not happen all the time but I'm not sure what triggers it.
Version: Exolve v0.16 August 17 2019, User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
I noticed this on a larger (10 x 8) puzzle I'm working on, but I've experimented with smaller sizes and this 4 x 3 grid behaves similarly:
exolve-begin
exolve-width: 4
exolve-height: 3
exolve-grid:
C R E W
A|N|L|E
R A I D
exolve-end
As you will see, it doesn't fill the last column on the right for some reason. With the larger puzzle it only fills the top row, which is T H I S|L I N E
and nothing else below it. The 'Reveal this' button seems to work fine on any clue.
I think it may be related, but I've also noticed with this grid that tab navigation doesn't work at all either.
Version: Exolve v0.18 August 23 2019, User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0
it seems like a natural thing to do when writing the clues out in a text file.
Last version 0.70 not working in Firefox 75.0 (OS Kubuntu 18.04). I trying to open exolve.html or exolve-m.html or test-russian.html. But there are just empty page and nothing. In Chrome 81.0.4044.129 - all right. Version 0.69 in Firefox 75.0 was working.
First I must say your software is superb!
At the moment I use it for music quiz with absolutely no written clues, and for normal stuff it behaves as I want with empty clue desciptions.
But in two cases It creates the clue machinery which I want to hide. I actually created a way to patch your code do do exacly that... but I didn't really understand what I was doing...
When I create words with dash in it, even with empty description I get stuff
https://fripp.changeip.org/melodikryss/melodikryss1/index_clues.html
see 2d
When I link clues I must give description text.
See the nodir-13 and/or 3d
So what would be super for me is a flag to turn off the two clue-view mechanisms (but not the marking of the actual squares).
Perhaps you can notice I use your standard mechanisms to create "turning words" (thank you utf-8!)
And now when you have created a mechanism to turn off numbering it works even better!
Thanks!
/Erik S, Sweden
Thanks
I tried different ways... But I only managed to get it work with ONE nodir followed by across and down.
This works:
exolve-nodir:
#d4 #e4 #f4 #g4 #h4 #h3 #h2 #h1 #a5 #a4 #a3 #a2 #a1 #b1 #c1 [8], 15a ()
but how to do something like this:
exolve-nodir:
#d4 #e4 #f4 #g4 #h4 #h3 #h2 #h1 #a5 #a4 #a3 #a2 #a1 #b1 #c1 [8], #a7 #b7 #c7 #d7 #e7 #f7 #g7 #h7 #i7 #j7 #j6 #j5 #j4 [13]
?
I think a shading mechanism which shades the clue green or something to verify the clue is solved will be great. If someone messes up a solved puzzle, the state should go back to unsolved (or atleast point to the letters which are wrong.)
Hi!
I was just about to create a board with exolve for the last week "Swedish National Radio: Melodikryss" and then try to write to The Swedish national Radio with a small feature request to use exolve instead of their own lousy system... I admit a bit naive... but one can try :-)
https://sverigesradio.se/sida/artikel.aspx?programid=2078&artikel=723047
What I wanted to point out is two things they are missing:
And now to my problem... as you see in the link for the last week puzzle, they sometimes use a prefilled square with a "-".
It should be wonderful to have that character handled as a letter... at least in the exolve-grid. If I understand stuff the "-" is not any decorator -- at least not yet :-)
So this first line should be super for me to use: "0000000-!00".
I understand that I could modify your last function with placing hyphens almost anywhere, but in this case where I want to
convince "them" about how simple to convert to exolve -- it would be great if it was just simple :-)
/Erik S
It's commoner, and people tend to look at the top of the list to see what the most recent release is.
I would like to highlight cells in my crossword so once the user has completed the crossword puzzle they have an anagram to solve from the individual letters. I have done this exolve-colour, however, I would like to add a clue to the cells to help them with the order. I was thinking of adding a unicode character (a number in a circle) in the top right of the cell so that it isn't confused with the main question numbering. Is this possible or is it down to CSS again?
For example:
1 Don't click if it's ______? (10)
#g17 [1]
You can see that 1 down has the correct number. The next cell down has a clue with the number one in the top left but it is confusing with the number above. So the red unicode\font number in a circle is a suggested clue position. Is this possible please?
Thanks again
Sometimes I would like the user to click one of the buttons but there not to be a window alert (message box popup). I intend to alert the user on the screen via markup. Is it possible please that if the relabel option is empty then you skip the alert()?
example:
exolve-relabel:
confirm-check-all:
I would like someone to complete the crossword without providing them with the ability to reveal the solution. Is it possible to allow individual buttons (including "Reveal this" and "Reveal All!") to be hidden, please?
eg
exolve-option: btn-reveal-this-visible:false btn-reveal-all-visible:false
It's not uncommon – especially in puzzle magazines – for grids to have a number of pre-entered letters/words. Is this a feature you might consider adding?
If so, another useful feature would be a button to reveal annotations for completely pre-entered words. This would be especially useful for me in a particular use case – to show the current state of a grid that's gradually filled over ~6 months via a weekly clue-writing competition – but perhaps it would also benefit users writing tutorial puzzles.
Attached is a screenshot of how a puzzle looks when opened in IE.
This is IE version 11.885.17134.0 on Windows Version 10.0.17134.885.
A feature request... I just think I myself have situations where I want to get as little help as possible...
/Erik S again
Can I ask, why is the grid definition appended to the URL?
Ballantyne
Hi!
First: for me hyphen placement is more a physical thing that I spontaneously should let the "exolve-grid" handle. With something like "-" or "!" after a letter.
But with your design I have some questions:
How to make a hyphened word in a multiword clue (except the first word)?
https://fripp.changeip.org/melodikryss/melodikryss1/index_clues.html (2d, 3d)
Is it a bug or a feature that the hyphen exist in 20d? For me it is definitely be a feature! So for me it would be great if the hyphen wasn't chopped. (I needed it in a swedish name "Sven-Erik")
Is it possible to add hyphen in nodir clues?
Thanks!
/Erik S
Relates to #40 (well actually was part 3 in that)
I realized it is a bit strange question for the generic "nodir", but for my only use of "nodir" it makes sense -- the "turning words".
So ideal this should be my suggested behaviour:
The same way of notation for hyphens Example (9-1-3), but the hyphen should only be placed if the next square is beside the "current" square.
So in my 9x10: https://fripp.changeip.org/melodikryss/melodikryss2/lost2.html
#a7 #b7 #c7 #d7 #e7 #f7 #g7 #h7 #i7 #j7 #j6 #j5 #j4 [] (9-1-3)
(The long turning word with number 8 if you check the link.)
I would like to have two hyphens -- one across and one down.
I understand it would perhaps give a lot of extra work I am the only one asking for... but it would be elegant :-)
issues i noticed:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.