I have done lots of small touch-ups, fixes, and other small adjustments like making the completion saving to localstorage work in all cases. I also slightly changed the README, and changed the screenshot there. I am ready for my second ship!

This took a lot of effort, but I have finally got it so the site remembers what levels you have completed! (Through localstorage). The level in question goes green after it has been completed some way or another. Failing the level doesn’t count.

I have improved some of the CSS. One of the problems I had was with the “about” part on my main screen being over top of other containers with different scaled screens. I made some improvements for that. I also changed some colours, including with the buttons. I made it so the header slightly fades on hover. I also did some other minor changes.

I made some UI changes.
I did some others changes, but my main goal was to start on the user interface and CSS. I have made some changes, including changing the top header margin, the colours, and the font family (I got one from Google Fonts).

I have made some slight improvements to the header and, also, I have made it so every level links back to the menu page. In my demonstration the domain changes. That is because I have a separate domain that caching is bypassing currently for debugging, but the one the site uses is the one still at deployment readiness.
(So while I go cmlin.win -> charleilei.dpdns.org, everyone else will stay the same).

Thanks for all the feedback from the first ship!

I appreciate all the help!

Here is everything I have done since the last ship:

• My free domain grant came through, so now I have a domain that I have set on Cloudflare to not cache, allowing me to keep hosting my site fast through cloudflare, while also using the domain for testing.
• Started working on level four files
• Improving CSS, following suggestions
• Updated README slightly
• Fixed some grammar and incorrect coding I missed (but didn’t affect the visibility at this point)
• Removed the footer from all the actual level pages as it kind of got in the way in cases, this got mentioned in feedback, and it isn’t really necessary, so it is only on the main page

What I plan to do:

• I didn’t get any feedback about not enough stories, so that isn’t a priority here (but eventually I will do a lot more with the levels
• IMPORTANT: I did get a lot of feedback about improving the UI and CSS, and keep consistency especially with the rounding of corners
• Other small adjustments based off feedback
• Link to the menu through the heading on each page
• Add images
• Improve endings

Addressing other feedback

I got feedback suggesting adding a back button. This is quite a good idea, although I won’t implement it in this case. Lots of the stories have endings and I don’t think the user should be able to back out. And, in some cases, it goes to a separate html file. In those cases the user can simply press the back button on their browser.

Thanks for reading this!

Changes I have made prior to first ship:

• Completed the storylines
• Changed file namings
• Added more files for story continuing
• Changed README and screenshot
• Modified CSS, especially with :hover
• Other small changes

My thoughts

I think I am ready to present a first shipment of my project. I may add more in the future, but I am happy with what I have got now. I hope you like it!

Below is my introductory ship message properly formatted:

Pick-A-Path

What I made

I have made a pick-a-path game website, with simple storylines that the user transports through.

Why

I am not a particularly good storyteller, but my goal with this was to improve my understanding of html, CSS, and JavaScript.

How

• I have been coding all this through Visual Studio Code in my browser to my Raspberry Pi through Codeserver
• I have learned some basics of html through my school, some of which I implemented here

How to use

• Click try project, and you will be transported to my website! The scaling should be fine for most screens. If the sizing doesn’t seem right to you, you can judge proportions off my screenshots (that is how intended).
• Select a level (I recommend starting at level 1)
• Read the story, and press the buttons to make your decisions as you go through the story

Thank you for having the time to read this, and I hope you love it :)

Completed level two coding and writing! I have made it more simple for this level with the file structure, as can be seen in the screenshot. There is less JavaScript, and more separate html files, to accommodate for a different storyline than the first one. Also, in this one the left and right JavaScript buttons are swapped around.

Some of the additions I have made

• Added some different background colours depending on the location of the part of the story
• Added more to the story, started level 2
• Improved some files, and changed JavaScript and also improved readability

I have done more changes than I can list, but here are some of the main ones:

• CSS styling improvements
• Improved the buttons and their animations
• Added more to the storyline
• Improved file organisation
• Added a website icon

I added more to the storyline and changed some colours.

I have added some more of the story to the pick-a-path and done a lot of file and folder organisation to make it easier to continue to develop.

I have achieved the following:

• Levels Menu
• Start of story for level one
• Buttons that can be selected and activate JavaScript functions
• A stage tracker
• Separate html files only once games branch off

I setup the following:

• Repo Initialised
• Hackatime Tracking
• Main files created
• Hosting live from my server
• Made available globally, and disabled Cloudflare caching during development
• Added title and sub-header
• Added simple CSS