This Hackathon event is hosted by Code Institute.
VladimirM
Aws Sabah Gheni
john traas_ci
Carla Buongiorno
Puk
Facilitator: tim_ci
All screenshots created using Am I responsive.
A Hackathon is a sprint-like event in which teams collaborate intensively on software projects.
The goal of a hackathon is to create a functioning project by the end of the event.
Hackathons are a great way to get real-world experience of agile programming and working together in a team, just like you would in a dev role.
You'll be assigned to a team, and work together to build a project based on an assigned theme.
You can work according to your own schedule but participants are asked to dedicate a minimum of 8-10 hours to working on the project.
All levels are welcome, from absolute beginners to advanced developers.
Build an interactive Halloween book or story
Your sit or app should have the following element:
- Depict a halloween (or fairy tale) story
- Can be interacted with in some way
- Should have animated elements
- Be creative!!
Please note: All times are in BST(Irish/UK time)
Wed, 13th Oct @ 17:00 - 18:00 : Kick-Off Webinar
Mon, 18th Oct @ 15:00 : Project Submission Deadline
Mon, 18th Sep @ 17:00 - 18:30 : Project Presentation Webinar
Tue, 19th Oct@ 15:00: Winners announced on Slack
- The project provides a clear and substantial value to the user.
- The project uses an original or innovative idea, design or implementation.
- The project was well-planned and executed, using GitHub Projects.
- Has a well structured and completed documentation (README & Wireframes).
- The project focus is realistic, and has an overall sense of completeness.
- To build something awesome to be proud of
- To make effective use of course knowledge and fulfill all given requirements
- To get experience in team work, project- and time management
- To make a project with a great looking layout, that works and that is practical
- To create a web application that makes the user want to stay and use with pleasure
A Normal Night at the Pub | Which path will you go down
Welcome to our interactive adventure! Idea behind this project was to create a story that has multiple steps, and can branch in different directions. It also has multiple endings to which you can get with each playthrough. For the limited time we had for this project, we ended up with 5 steps where each step has 4 choices(see story_outline_v2.pdf). We decided not to give all 4 options on each step as removing one of the choices, leaves the reader with new options on each new playthrough making the story replayable. There are 4 endings - 2 good, 2 bad and, depending on your choices, you can get to one ending each playthrough. If you want to know more about how the story is layed out, please see story_outline_v2.pdf and story_wireframe_v2.pdf.
As from the technical point, we opted for a one page concept and let the JavaScript dynamically change the contents with each user interaction. We created an array of objects with key value pairs for each part of the step, so the same function is grabbing a different story part, depending on users choice. Each time reader chooses an option, a one function is run to change the backgrounds, story text, populate the choice buttons and everything needed to present the next part of the story. This way we can dynamically add more options, story parts whenever we want(we thank John Traas for this 😄 ). Additional benefit is that it prevents the user to go back on its choice, as we wanted to encourage the user to finish the story, before starting all over.
We added random jump scares, ambient music to add to the atmosphere while reading the story and combined with branching story, makes the whole website different each time it is played through.
We hope you will like our project as we did making it, and go through it multiple times as it was intended. Don't be scared of the scary story, it's just a fantasy. Or is it? 😉
As a user,
- I want to be able to switch sound on an off.
- I want to be able to read the story.
- I want to be able to interact with the story.
- I want to be able to affect the storyline.
- I want to be able to affect the story outcome.
- I want to be scared from time to time.
- I want to experience more than just reading a story.
- I want audio as well as visual elements to enhance my experience.
- I want to be able to read the story again.
As a Page owner,
- I want to be able to update stories and add new content.
- I want to be able to reuse modules and functions for future content updates.
- Background (#000000) - Black
- Text (#FFFFFF) - White
- Buttons (#FF0000) - Red
- Story Intro
- Story Part 1
- Story Part 2.1
- Story Part 2.2
- Story Part 2.3
- Story Part 3.1
- Story Part 3.2
- Story Part 3.3
- Story Part 3.4
- Story Part 4.1
- Story Part 4.2
- Story Part 4.3
- Story Part 4.4
- Story Part 5.1
- Story Part 5.2
- Story Part 5.3
- Story Part 5.4
- HTML5
- Used as the main markup language for the website content.
- CSS3
- Used to style the individual webpages.
- JavaScript
- Used to create the interactive functionality of the website
- Bootstrap5
- Used to design a mobile-first responsive website layout.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
- GitHub
- Used to store, host and deploy the project files and source code after being pushed from Git.
- Gitpod
- An online IDE linked to the GitHub repository used for the majority of the code development.
- GitHub Pages
- It used to deploy the project.
- Google fonts
- Used for the website fonts.
- Balsamiq wireframes
- An online tool to designed the site mock-ups.
- Coolors
- An online tool used to create the website colour scheme.
- paint.net
- Used to create the Mockups and to edit images.
- favicon.io
- Used to create the website favicons
- Howler.js
- Howler.js was used to play audio files.
- Am I Responsive?
- A tool for taking a quick snapshot of the responsive breakpoints of the website to visualize how the site will look on different device screen sizes in one place. The resulting screenshot is also used as the README.md logo image.
- A set of friendly HTTP Error landing pages for site visitors to see if a requested page is unavailable or cannot be accessed.
- The pages provide a message to the user and a button to click to return the visitor to the homepage.
- HTTP 404, 500 & 503 errors are handled with custom templates to cover the most common events.
- An audio storyteller
- Functional audio toggle on/off
- Add addtional stories
You can either fork or clone the GitHub repository to use this project.
Log in to GitHub and locate the GitHub account AwsSG to get the scramblinspiders repository.
Make a copy of the GitHub Repository by "forking" the orginal repository onto your own account, where changes can be made without affecting original repository.
Click on the fork icon (located on top right of the page at the same level of repository name) You should now have a copy of this repository into your GitHub account.
For more information on how to clone a repository, please check this GitHub documentation.
Log in to GitHub and locate the GitHub account AwsSG to get the scramblinspiders repository.
- Under the repository name, click the Code button.
- Copy the url in the dropdown box.
- Using your favourite IDE open up your preferred terminal.
- Navigate to your desired file location.
gh repo clone AwsSG/scramblinspiders
You can find all the steps to follow according your chosen method in this GitHub documentation on how to clone a reposistory.
- The paths to audio files and scene images are written absolutely, e.g '/scramblinspiders/static/assets...../"
- This means that they will not run locally, replace '/scramblinspiders' at with './assets' at the start of each file path.
- If you wish to change the name of your repo to something other than this, all relevant file paths must be updated in files where you would replace 'scramblinspiders' with the name of your new repo
- static > js > story_choices.js
- static > js > on_load.js
-
Images
-
Icons
-
Favicon
- Background music:
- Castle: ES_Spider Room by Ethan Sloan
- Death: Cold Isolation by Fesliyan Studios
- Step 4: Face to Face Tension by Komiku
- Step 5(waking up): Forest of Good and Evil by astrofreq
- Step 5(struggle): Brutality by David Fesliyan
Audio from Epidemic Sound used as royalty free music. Audio files published in free trial therefore not subject to copyright claims as per RULES.
Other audio used under a royalty free licence. Please check the respective pages.