DDMs
Band Website:
The first thing to do when creating a website is to storyboard. Although I did not draw a storyboard I had the idea in my head from the beginning. I knew a nice red, maroon, and black color scheme would work well. I then thought of the layout and how it would work. To test it out though I needed to get started. So I started out with the basic HTML layout and HTML elements. This would include the elements everyone needs, like <!DOCTYPE html>, <head>, <body>, a link to my css, etc.
After doing this I needed to start adding the content to the website. This started with the elements content. On my first page, index.html, I started inside the <body> tags. Inside this I create child tags <header>, <main>, and <footer>. These are like divs that will help organize my content when coding. I first start with the <header> tags. In this I add all the navigation buttons, header banner, and what page the user is currently on.
Now keep in mind that not all the CSS rules that you see in the picture were added instantly. The only CSS rules at this point were the buttons, image size, and font size. After this I moved onto the <main> tag. In this all I had was a paragraph and an image for OneRepublic.
As you can tell this was not all that much content but it was what was required. Finally on this first page I added the content for the <footer> tag. All this included were credits to Up Sell marketing for the website and the year it was created.
The <header> and <footer> tags are almost exactly the same on all pages. So on my second page (the band members) all I really had to do was change the <main>. Inside this I added images, and captions, of each of the band members.
This was just a series of <p> tags and <img> tags. After that I created my 3rd page. This page was the Discography page. This was a page where I needed the band’s albums and the songs in them. On this page I used a table with lists and images inside of them. To do this I organized the table elements with numbers. I then put the albums and their images where their corresponding numbers were, same with the songs.
My 4th page was just resources. This was just an image with a link embedded and another link. The first link led to a website where I found an image and the second one led to the Wikipedia page where I got my information on OneRepublic.
On my final page I had to put 6 videos of the band’s songs. This could be them performing or just the lyric video.
The page just consisted of me using the <iframe> tag from youtube to input the videos. After I had put all of the pages and their required content in I did all my CSS styling. This included styling the body, tables, images, buttons, and hyperlinks.
Once I was done with that I validated the code and did some finishing touches.
Interactive Story:
I started with the storyboard for my interactable story website.
This helped me understand how many different paths I would need to make and what my approach should be. After creating my storyboard I started on creating the website.
First I just needed to lay out the website, I would leave styling with CSS until the end of the project. My website consisted of divs in the body, and the title and image in the header. The HTML was very simple and short to accomplish. I used buttons and a div for the options and text. I then applied classes and id’s to the elements in the HTML to help the javascript identify what happens to certain elements.
Then I went onto the javascript. At first I tried to use objects to lay out my story and the options. This was a bit more confusing and complicated than the way I eventually decided to do it.
The way I finally decided to do it is with a state machine:
This continues for the rest of the story and options.
What this does is when the game runs, it starts on the first id of the state machine (id:1). Then, depending on the option that the user chooses it sends them to another id. Like if you pick run on the first id it sends you to id:3 to continue the story. It also uses negative id’s to restart the game. Using a function called selectOption, it determines which id to go to next, and also is responsible for restarting the game when the id is -1.
Finally I added the CSS elements to the website and got a final of this:
Crossword Puzzle
The crossword puzzle is a program that has a text file with a set of names. There is a board with cells that are true and false. When you ask for hints it gives you the first names of the students. The answers are the last names.
In this when you type in the last names with the corresponding row/column it fills in the answers. The answers are able to overlap and go up and down.
Most of the program was usable within the amount of time given for the DDM.
Tab Content