Spells Has Launched

SIMPLIFY:

We did add the edit icon to let people try typing the code. This does complicate the app but on the other hand can be quite easily ignored. It is just one extra icon on the front.

This gives an extra level of testing for advanced or for teachers that want actual typing. I know it does not have syntax coloring - that would be tricky to match the upper syntax coloring.

What do others think, should we not do the text testing or should we keep the text testing?

Have adjusted the speaking icon

yes I need it to easy copy and paste it to slate

  • but better also monochrome because coding is also monochrome toggle (better for my eyes)
  • idea for checkmark when a part is correct
  • idea to show the correct generated code directly into the textarea
  • idea for a copy code button to bring over to SLATE

If there were room for numbers and checkmarks we probably would have done them. But as is, we are really tight for size on some of the longer lines - the tiles will become too small to drag. So, we figure that a dot will do. And people can just figure out the line numbers. Numbers on the Typings area would not make sense as they can skip lines, etc.

One idea might be to automatically move the STEPS carousel to whatever line they have last interacted with. We tried it, and found it too annoying.

You can copy the text with the native interface like select and copy. We will consider a button. The TEST button goes red and receives an emitter... so a copy button next to it, sort of crowds this.

Not putting the answer in the Typings if they are correct. The point of the Typings is to practice and test typing.

Interesting idea for monochrome - will consider it, but not because the text below is monochrome but as a potential accessibility solution.

ok, but the TEST is not really testing the code, it is more [CHECK]
because in ZIM SLATE we have TEST and it is really testing the code and show the answer..

maybe a button [SLATE] so it opens directly the code into SLATE

We may be treating Spells as an independent site. Currently we link to ZIM things but there is no requirement that we keep interface names consistent with ZIM. Test is a fine word to see if the person typing matches the code above. There is nowhere where we suggest that the code will be run.

However, CHECK is probably as good a word and would avoid cross-over expectation.

We are not integrating, at this time, with SLATE.

also for the shuffle was thinking to
image
because it exists also at spotify

Yes... that is a good one for shuffle. I am not too worried about it. Rewind / Refresh / Reset / Restart ... also works and then we can use the same icon for restarting the CODE and restarting the APP.

The APP box is highlighted in purple to indicate the preview is the app - not the Shufflings App in general.

Okay - have adjusted the Spells Shufflings to a compromise proposed by @Rania who suggested dimming the app with a shield unless a play button is pressed. This is in the default easy mode. We also remove the shield if the puzzle is solved.

This way, the user can concentrate on the main task more easily following @amihanya UX suggestion to focus. We did not remove the preview... but reduced its distraction.

In changing to a play button for the app, there was no need to keep the two refresh icons the same so went to a shuffle icon for the code. The play arrow and the up arrow perhaps looked too similar so went with a maximize icon. Thanks @karelrosseel82 for suggesting the icons.

Just changed https://spellsjs.com/magic.html and the old version is at https://spellsjs.com/magic_old.html. So will test it out and if anyone has any thoughts, let us know.

@Jamesbrrtt you were looking for a way that the user can see a solution. I would like to use this as a test as well - pressing the star shows how many were complete. The effectiveness of the test would be reduced if we provided answers. Maybe ultimately, a section of the Spells site could be for teachers and have a link to some solutions.

@Chris_S still no luck on our side reproducing the errors you had on Firefox. When we run them to check the "sounds before initialization" error, we see no error and we added comments to test the expected order - they seem fine. We declare sounds then use it in the test:

We have kept the comments in the magic_old.html file. Perhaps you or others can test again and see if the order that you get, or indeed if you still get the errors.

@karelrosseel82 we have added a dark mode / light mode icon and a light mode shuffler. The app will remember your setting.

image

image

I have cleared my cache and tried again in Firefox 143. As soon as I click Begin I get...

Uncaught TypeError: e is not a constructor
Speech https://zimjs.org/cdn/018/zim_min.js:7
start https://spellsjs.com/magic.html:977
id https://zimjs.org/cdn/018/zim_min.js:7
setTimeout handlerh https://zimjs.org/cdn/018/zim_min.js:7
interval https://zimjs.org/cdn/018/zim_min.js:7
timeout https://zimjs.org/cdn/018/zim_min.js:7
start https://spellsjs.com/magic.html:429
Uo https://zimjs.org/cdn/018/zim_min.js:7
_runActionsRange https://zimjs.org/cdn/1.5.0/createjs.js:40
_runActions https://zimjs.org/cdn/1.5.0/createjs.js:40
setPosition https://zimjs.org/cdn/1.5.0/createjs.js:40
advance https://zimjs.org/cdn/1.5.0/createjs.js:40
tick https://zimjs.org/cdn/1.5.0/createjs.js:40
handleEvent https://zimjs.org/cdn/1.5.0/createjs.js:40
_dispatchEvent https://zimjs.org/cdn/1.5.0/createjs.js:40
_dispatchEvent https://zimjs.org/cdn/1.5.0/createjs.js:40
dispatchEvent https://zimjs.org/cdn/1.5.0/createjs.js:40
_tick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handlern._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
setTimeout handler
n._setupTick https://zimjs.org/cdn/1.5.0/createjs.js:40
_handleTimeout https://zimjs.org/cdn/1.5.0/createjs.js:40
ZIM_min.js:7:1058916

Okay - that seems to be an error in Speech() with respect to your system. We have made a simple case with the docs version of ZIM so we can track the error better. When we try this with Firefox, we do not see an error. How about you @Chris_S - and thanks for you patience here.

https://spellsjs.com/speech.html - just the Sound object

https://spellsjs.com/speech2.html - with talking

We are 143 too - maybe it has something to do with speech turned on or off? I tried setting about:config media.webspeech.synth.enabled to false and it is okay - we just adjusted a test there which was giving an error testing for speechSynthesis (we now use the typeof) but I don't think that was the error.

From version ⁨142⁩⁩⁨⁨ ⁩users⁩ ⁨ ⁩must explicitly set the <U+2068>media.webspeech.recognition.enable<U+2069>⁨ ⁩ ⁨preference⁩⁨⁨ ⁩to <U+2068>true<U+2069>⁩⁨.⁩ ⁨To change preferences in ⁨Firefox⁩, visit ⁨about:config⁩.⁩

That is speech recognition... oh... maybe the Speech tries to activate both even though it is not using recognition in this case just synthesis. Let us try turning the recognition off and see what happens.

Yes - that is it. Okay... so we can properly test that and patch ZIM 018. Thanks. Will post here when it is ready.

Okay @Chris_S with a clearing of the cache... that should work now. It has been patched in ZIM 018.

It's working in Firefox now :+1:

1 Like

Just a heads up.

We are working on potentially selling Shufflings. Currently, the Spells Site is a temporary place-holder. There are two Shufflings there right now, but these may be rolled into a larger project for schools and general education.

If anyone is interested in more about this, you are welcome to DM me.

BTW - our server guy has set a forced https on our sites so that should correct any "Site can't be reached" issues that were out there. We will test next week to be sure.

1 Like

thanks