My Game! Made Over The Winter Break!

I made my first official game on Code.org's app lab during the winter break. The game was a trivia game. I first did an alpha version of my game to test and see the scope and goal of the game, as well as my skills as a coder. After I finished the alpha version, I built the final version. First I added the U.I. to my game from the design menu. I added images, text, screens, and buttons to make the game functional. Secondly, I typed in the starting comments to explain the game. Thirdly, I dragged in onEvent code from the toolbox. I set the ID to the start button and set the type to click. Inside the onEvent, I dragged in playSound for the soundtrack of the game and setScreen to change the screen to the tutorial. I realized that the soundtrack wouldn't stop if you click the start button multiple times, so I tried to have a button to stop the sound with another onEvent with stopSound code inside that stops the soundtrack. I put stopSound code inside the first onEvent and surrounded the onEvents with timedLoops code. I even put onEvents with stopSound code to stop the soundtrack at various screens. Unfortunately there's potentially a bug that repeats the soundtrack once you press multiple times on the button and I couldn't fix it. The only solution I found was reloading. Anyhow, I flipped to the credits screen and inserted onEvent with ID as creditsButton and type as click. Inside the onEvent, I dragged in setScreen to set the screen to the credits. Next I inserted another onEvent with the ID as backToTheTitleScreen and type as click. I dragged setScreen and set it to titleScreen to send the player back to the title screen whenever the play presses the button to go back to the title screen. I placed in an onEvent with the ID as backToTheTitleScreen2 and type as click. I dragged setScreen code and set it to the title screen. After that, I dragged another onEvent function to go to the credits again from the winning screen. Then I placed onEvents for the credits and to continue rolling through the credits at buttons. Next I placed onEvents for the credits to back out of the credits and into the title screen. Afterwords I coded the tutorial. I inserted onEvent functions with IDs of tutorialAnswer(a number) and type as button. I set the screen for 3 of the buttons to go to the next screen while one of them sets the screen to the game over screen. After that, I placed an onEvent function that hides the tutorial and allows the player to skip the tutorial. Afterwords, I coded for the selection screen of my game. I placed onEvent functions with various IDs that goes to individual screens and I set the type to click. The first subject I coded was ELA. I dragged onEvents with screen IDs to lv(number)(ELA)Answer(number), type as click, and sets the screen to the next level and or to game over. I did the same thing but with the subject switched for the rest of the subjects except Memes. The subjects that had the same things as ELA were Math, Spanish, Science, Social Studies, Extracurricular activities, and Physical Education/Health. So for the Memes subject, I first coded the user agreement screen to disclaim the player. I placed onEvent functions with the IDs as contract button and iDeclineButton. I set the type to click to make the buttons clickable. Inside the onEvent functions I placed stopSound to try to stop the soundtrack and setScreens which sets the screen to either the next level or back to the selection screen. For the levels of Memes, I placed onEvent functions. I set the IDs for the onEvents as lv(number)(Memes)Answer(number) and set the type to click. I placed setScreens inside the onEvent functions that either go the next level or send the player to the game over screen. For level 5, I made the image clickable which makes the player go to the game over screen to reference a meme. For level 7, I placed on event functions that IDs match to the Ugandian Knuckles images and whenever the mouse pointer is hovered over, it says "Do you da wae?". I also made one of the answers switch to the science subject when the button is clicked to troll people since the Memes subject isn't a serious but a more comedic subject. For the final round of Memes which is level 10, I made a catching mini game for the player to pass instead of answering questions. I first placed an onEvent function that has the ID of SuccessKidMeme and a type of mouseover. Inside it I dragged in setPosition code. I set the ID to SuccessKidMeme and dragged in randomNumbers for the x and y positions and the height and width to make the image go to random places on the screen at different sizes. Secondly, I dragged in another onEvent function that has the ID of SucessKidMeme again but this time has a type of click. I dragged in showElement with an ID of memesCaughtText1 to show the text that the meme was caught. I dragged in hideElement with and ID of SuccessKidMeme to hide the Success Kid Meme image. I dragged in another showElement with and ID of AnimeMeme. I placed in a second onEvent function inside the SuccessKidMeme onEvent function with the ID of AnimeMeme and a type of mouseover. I dragged in setPosition with the ID of AnimeMeme and dragged in randomNumbers to make the image go to random places at different sizes. Thirdly, I placed in another onEvent function that has the ID of AnimeMeme and type as click. A I dragged in showElement with an ID of memesCaughtText2 to show the text that the meme was caught. I dragged in hideElement with and ID of AnimeMeme to hide the Anime Meme image. I dragged in another showElement with and ID of BeeMeme. I placed in a second onEvent function inside the Anime onEvent function with the ID of BeeMeme and a type of mouseover. I dragged in setPosition with the ID of BeeMeme and dragged in randomNumbers to make the image go to random places at different sizes. Next I dragged an onEvent function with a ID of BeeMeme and a type of click. I coded showElement with an ID of memesCaughtText3 and setScreen with an ID of winning screen to make the player win the game. Finally, I added sound effects and comments to my game and code to make the user experience better. It is important for web designers to know how to make a game in case they are assigned to make a website with games in it.

My game: https://studio.code.org/projects/applab/O97fRL8aylP53rf3xjQWggTqcV-Cy1HlXre1ZRCfmB4

Lab 16 clicker / color sleuth

In this lab, I embedded 2 programs from Code.org that was made independently by myself. First I typed in the required code needed for my HTML document. I typed in <!doctype html>, html tags, <meta charset="UTF-8">,  title tags with lab 16 inside it, head tags, and body tags. Secondly I typed in <link rel="icon" href="../Lab_09/CSmallFavicon.png" type="image/png"> to make my favicon display on the tab. Thirdly, I typed in style tags and typed iframe:focus {outline: none;} iframe[seamless] {display: block;} inside to style my iframes which is to display my programs. Next I typed in the body background and made the background color cyan by typing bgcolor="cyan". Thereafter, I typed in center tags inside the body tags to center the content. I typed in h1 tags inside the center tags and typed in my name, date, "Digital Design", and "Lab 16". Then I inserted br tags to make line breaks in my content. After that, I inserted p tags to explain the website and the programs with text. Afterwords, I typed in <iframe src="(hyperlink to program)"></iframe> 2 times for the two programs. After that, I submitted my webpage to the servers. (Not this week though). Knowing how to use iframes allows a web designer the ability to perform their job effectively and efficiently.

Lab 15 Embed App

In this lab, I embedded 2 programs from Code.org. One made from a collaborative effort by me and my teammates. One made independently. First I typed in the required code needed for my HTML document. I typed in <!doctype html>, html tags, <meta charset="UTF-8">,  title tags with lab 15 in it, head tags, and body tags. Secondly I typed in <link rel="icon" href="../Lab_09/CSmallFavicon.png" type="image/png"> to make my favicon display on the tab. Thirdly, I typed in style tags and typed iframe:focus {outline: none;} iframe[seamless] {display: block;} inside to style my iframes which is to display my programs. Next I typed in the body background and made the background color cyan by typing bgcolor="cyan". Thereafter, I typed in center tags inside the body tags to center the content. I typed in h1 tags inside the center tags and typed in my name, date, "Digital Design", and "Lab 15". Then I inserted br tags to make line breaks in my content. After that, I inserted p tags to explain the website and the programs with text. Afterwords, I typed in <iframe src="(hyperlink to program)"></iframe> 2 times for the two programs. After that, I submitted my webpage to the servers. (Not this week though). Knowing how to use iframes allows a web designer the ability to perform their job effectively and efficiently.

Lab 17 HTML/JS forms

In this lab, I created a webpage that has HTML/Javascript forms in which users can type into the boxes to show a message. To do this however, I first typed in the necessary starter code first. The starter code is the html tags, head tags, meta tags, body tags, and the center tags. Second, I placed in my favicon inside the head tags by typing in <link rel="icon" href="../lab_09/CSmallFavicon.png" type="image/png">. Thirdly I set the bgbody color or background color to cyan. Fourthly, I wrote heading tags in the body tags in which I wrote inside: my name, the date, Digital Design, and Lab 17. Next I typed in p tags to explain the website and disclaim the user. After that I put <br> tags to make line breaks in between the content. Afterwords, I put in two forms into the code. So to create the first form, which is just having the user fill out their name in the form, I first typed in <form name="alertform">. I next typed in "Enter your name:" as text and bolded them with the <b> tags. After that, I inputted <input class="textbox" type="text" name="yourname">. Afterwords, I typed in <input class="button" type="button" value="Go" onClick="audio(); window.alert('Hello' + ' ' + document.alertform.yourname.value); ">  </form>.  After the first form, I inserted <br> tags and typed the second form. I typed in div tags and inside those div tags I typed; <form name="forum">
<b>Name: <input class="textbox" type="text" name="name"></b> <br><br> <b>Phone Number: <input class="textbox" type="text" name="phone"></b> <br><br> <b>Email Address: <input class="textbox" type="text" name="email"></b> <br><br> <input class="button" type="button" value="Enter" onclick="audio(); window.alert('Your name is' + ' ' + document.forum.name.value + ' ' + 'with a phone number of' + ' ' + document.forum.phone.value + ' ' + 'and an email address of' + ' ' + document.forum.email.value + '. This is Wei Jian Zhen and thank you for your information!');"></form>. This second form basically creates a textbox that appears from the top of the browser and displays a message from the information gathered from the form. Furthermore, I typed in audio which makes the the pop-up/textbox make sound when click; which was <audio id="victory" src="sms-alert-1-daniel_simon.mp3" preload="auto"></audio> and javascript code into the html; inside script tags function audio() { document.getElementById("victory").play();}. Finally, I uploaded the document to the servers to become a webpage. Knowing how to use HMTL/JS forms is important to a web designer because it helps the web designer do their job and makes their users have a better user experience when using their website.

Webpage: http://techteach.us/Web2020/ZWeiJian/Labs/Lab_17/Lab17.html?yourname=w

CTE EXPO Junior Year (WBL Requirement)

The CTE EXPO is an event that promotes and advertises guests to the academy of Web Design. It is important because it recruits the next generation of web designers to the Web Design academy, and gives the students presenting the CTE EXPO a chance to practice their soft skills such as talking and professionalism. During the CTE EXPO, a lot of guests came into the Web Design classroom which students presented their work to the guests and explained to them the benefits of Web Design and why they should join. What went wrong and was that I didn't talk a whole lot which I would like to improve next year. I presented my game which a lot of people got attracted too, which was the thing that went right. I could continue this by making an even better game or website. The CTE EXPO helps me practice my speech skills personally and generates positive outcomes as a part of the Web Design team. 

CTE EXPO Reflection Journal

The objective of the CTE EXPO was promote the academy of Web Design and promote yourself as a salesman or saleswoman to convince people to join the Web Design academy. I, however, did not prepare much for the CTE EXPO. I took a shower right before the day of the CTE EXPO and wore a business casual outfit comprised of a white shirt and black pants. During the event, I welcomed the people coming in for the CTE EXPO. Another thing I did was gather guests from the CTE EXPO and presented my game and website to them, which I explained to them things about web design. Furthermore, I teamed up with other salespersons to get guests to the computers that showed the games and websites, and make it easier to explain to the whole spectrum of work and determination of Web Design.  The explanations were about the programs that the Web Design academy uses and what to expect as a web designer when a guest joins the academy. I think that my presentation of my website and especially my game went really well because the guests gravitated to it and played the game. Even without my knowledge when I had to help my fellow salesperson and present another guest to a computer. The guests had a positive interaction with my game, and that serves as proof as well as the other proof mentioned. Which is that my presentation was the highlight of my overall work in web Design that went really well. I think, for next year's CTE EXPO, I could improve my speech skills because I did not talk enough to the guests fluently and correctly. I feel that it was an overall positive experience for the CTE EXPO because it went smoothly and efficiently.

Pictures from the event:

CTE EXPO Poster

I made a poster that represented and guided people to my game "Virtual Petting". First up in the poster, I opened up Microsoft Word. I set the settings to 11*17 landscape. Secondly, I took screenshots of my game's screens and code named "Virtual Petting" from Code.org and inserted them from the insert button in Microsoft Word. I placed the screenshots/images on the document. I arranged them in using the mouse. Next I inserted my image of my sketch of the game in to Microsoft Word via the insert button. Then I placed the sketch image in the document on a specific position. After that I inserted text boxes on my document from the shapes button on Microsoft Word. I placed them at certain areas on the document using the mouse. At the top, I typed in the title, date, name, and period inside the text boxes. Afterwords I typed inside text boxes explanations for my picture and my game. Lastly, I made a text box that covers the whole document, sent it to the back, made the background/fill blue, and clicked enter to confirm it. I saved my poster and saved it again as a PDF. Creating a poster is useful for a web designer because it allows the web designer to market their ideas and innovations to other people and investors.

PDF document: https://s3.us-west-1.amazonaws.com/sfile.jupitered.com/d24795/s5027226/1571904738/Poster_Project_Game_3.pdf