webWiz

• 

  Array method puzzle 3

• 

  Home page

• 

  Async/await puzzle 4

Inspiration

Our inspiration is our fellow classmates and peers! As computer science education tutors, we've seen many students get held back by tricky concepts in web development such as asynchronous flow, query selectors, etc. Our game aims to clear those roadblocks and empower students to do their best work without getting held up by technical details or syntax.

What it does

webWiz provides puzzles for three categories: async/await functions, css selectors, and array methods. Each concept has 5 puzzles, each with either a drag-and-drop interface, or a freetext input to help the user solidify their understanding.

How we built it

Our stack for this project is HTML, CSS, JavaScript, and SvelteKit. We started with our basic component structure, then created the content we wanted to insert into our component structure. Our app takes some attributes and inspiration from single page applications. Each section of puzzles has a single page that all levels are displayed on, and the page changes dynamically. We used the Svelte framework not only to have a modular design, but also to have the capability to update the page on change.

Challenges we ran into

Challenge: Choosing the right concepts to cover. Solution: Draw on roadblocks we’ve encountered in our own development, and ask other developers what they struggled to understand when learning web basics.

Challenge: Deciding how the user will interact with the website. Solution: Creating intuitive interactive user elements like drag and drop blocks.

Challenge: Implementing interactive features. Solution: Examples of other people's work and Svelte documentation helped us overcome the struggle of making interactive elements work, and overcoming unfamiliar syntax.

Challenge: Creating a clear goal and wording problems in a way that is understandable to someone unfamiliar with certain JavaScript concepts Solution: Have others read our questions and give feedback on how clear the problem, goal, and instructions are. Playtest with people outside our team.

Accomplishments that we're proud of

Our custom drag and drop feature is one thing that we're really proud of. This feature took about three hours of work, and we think it was well worth it! We were able to make the drag and drop features into components so we could easily replicate the functionality in all of our puzzles.

Another thing we are proud of is our progress bar which is a component where the value and color are dynamically set through a progress bar component.

Of course, we are very happy with how much content we were able to create and implement into our puzzle designs, and are proud in the clarity we were able to achieve.

What we learned

We learned SvelteKit for this project. SvelteKit really helped us with routing, and the Svelte framework makes it possible for us to have dynamic pages that are consistent across the board.

What's next for webWiz

We want to implement more concepts in the future, and maybe even more levels to the existing concepts! We want to tackle other tough concepts like file paths, the call stack, and more.

Built With

• css3
• git
• github
• html5
• javascript
• render
• svelte
• sveltekit