We know that we are born in an unequal and diverse world. People are born into different circumstances and learn in different ways. Why is this an issue? People across the world have different approaches to the way we understand things, for example, Me as a student in high school would ignore textbooks because I felt that reading the CS textbook was a waste of time when I could’ve to practice the code in the first hand and tackle the problems. Not only that but sometimes textbooks can be worded really complicated and hard to understand. Another issue is that students don’t learn at the same rate, some students have naturally god gifted talent where they are capable of understanding a complex concept by reading it once, while others would have to spend hours trying to grasp it.

What it does

HackBook is an online interactive textbook where users are able to magnify their learning experience by interacting with problems at hand and see the process to solve these problems step by step.

How we built it

We used "SquareSpace" as a web builder tool, it helped do the CSS part as it had the structure and placement of text. The text and the interaction code and the colors are all done inside the coding platform of Squarespace which uses HTML and we had to use iFrame and Python tutor to help us embed the interactive code.


We color-coded certain texts to make it more user-friendly such as red for errors or warnings, blue for correct operators, and purple for different variable types.

Challenges we ran into

Before DubHacks2020 began, our group was mostly unfamiliar with JavaScript and HTML, this proved to be a challenge for us as these are basically the foundations of building a web app. Due to this, we used a Web Builder tool called “SquareSpace,” however, it had troubles embedding the code would not display the interactive problems. We were only able to build an example of two chapters in a Python Textbook, however, were not able to include a pdf converter to allow a more variety of different kinds of textbooks.

Accomplishments that We're proud of

We are proud of how far we've grown from DubHacks and what we've learned. In the beginning, none of knew anything about front and back end development where we weren't familiar with languages like HTML and JS. During this Hackathon, we used all our resources (mentors, online resources) in order to learn HTNL and JS and how to begin to develop a web application. Throughout this process, we had to learn multiple different ways, in fact, we also learned azure and how to create a static app in azure, however, we felt more efficient by using SquareSpace. We are proud of how much project development we've learned as this was the first Hackathon for all of us. Sure we may have had stressful hours of pulling our hair out, but overall we are proud that we poured all our effort into learning work with something new and pull through.

What we learned

HTML – Although we used “SquareSpace,” we had to code everything in HTML as “SquareSpace” provided the tools that are for editing like CSS and all the interactive programs and text were done in HTML. Resourceful – We were able to learn how to seek resources independently and how we can use that information to benefit our code. Collaboration – Learned to divide and conquer tasks together, using Trello, and also we helped one another when we struggled to code a certain aspect.

What's next for HackBook

As we continue working on this project, we would: Gain the skills to build a web development app from scratch so there wouldn’t be issues regarding the display of some code (or at least it is much more familiar for us to fix since web builders use their own framework). Implement a pdf converter that allows you to insert pdf and display them on our web page. Other software implementation similar to pythontutor like Wolfram to help display graph equations in Math.

Built With

Share this project: