I made a website that explains recursion, using Elm

It was my first Elm project when I started learning Elm. Despite that, I thought why do I not polish it and publish it, so it may be useful. At least I can get some feedback.

Feel free to let me know what is done right and what can be improved, both on the website engineering and the actual content.

My take in retrospect is that, it seems like a lot of text, and may be too dense for a learner to sit through.

Website: https://www.recursively.xyz/
Source: https://github.com/techmindful/recursive-thinking


Thank you for sharing!

I have not yet made it through the whole sequence. So far, I only have this superficial observation:
I noticed that when I clicked on one of the answers, I was briefly confused because I did not see a change in the website. The button was at the bottom of my viewport so that the changed part appeared below the viewport. As a result, the only visible change in the case was in the scrollbar. I think this is a common problem with known solutions. If this is important enough, we could solve it by adding a command to scroll down.

I was also surprised that the answers are not reset when using the “Home” button. Is this intended?

1 Like

Thanks for the feedback! That is a great observation. I couldn’t see that problem because I assumed too much as the maker of the website. Making it scroll down a little should be acceptable. But is it better to always scroll down when “submit” is clicked, or to detect if the new content is out of viewport and only then scroll down? Or maybe only scroll down when the scrollbar is “low enough”? Maybe I can experiment.

the answers are not reset when using the “Home” button

This is somewhat intended. The quiz statuses are saved in the model, so they naturally stay there, until the user leaves the website.

No idea. I have not tested so far.

I looked into adding a command to scroll to the added content. We could add such a command on the handling of the QuizRecvInput event. If we know the ‘id’ of the newest element, we can use Browser.Dom.getViewportOf to get its viewport and then scroll there. However, I did not yet add such an ID. I see that on some pages, we have multiple submit buttons adding elements at different times, not sure how to best model that so far.
One way would be to just add the same id only to the last element in the list.

We could add such a command on the handling of the QuizRecvInput event.
That sounds straightforward, yes.

I think my structuring of quiz page content, at least in P4.elm, can be questionable. It’s like a chain. For example

postQuiz1 =
  [ preQuiz2
  , quiz2
  , if quiz2 got correct answer then

Not sure if it’s the best structure.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.