Development

I created the gitlab repository for our group and also made some basic commits to get the file order/structure of the project started.

My task in the development project is to make the Create your quiz! Page and also “optionally” make a database to keep track of the quizes and the settings of these quizes since i already know how to do this and have done it before.

For my code on the website i made i started by copying the code that Nedas made and use it as an outline because i saw and realized that its similar to how my page would have to look.

I changed the classes of the divs,etc so it would not interfere with his page and also added a cyq in the class so its easy to identify since my page is called “create your quiz”. At first i made the page static because i thought that we would have to just make a very simple demo and i did not see the mail that was sent about the requirements since i was not here yet in the semester. I went in blindly and trusting that my members of my team knew what we were doing since they have been in the semester for longer than me and that they would explain and know what we had to do. It was my fault for not looking for extra information in the old announcements.

i first made the static page thinking it was the assignment in its final form. I hard coded everything and used “position: relative;” on the main div and “position: absolute;” on the objects that were in the div so they would stay relative to the div. I positioned them with top/bottom/left/right. And my div/box itself was not responsive and adaptive because we only needed to show the laptop version. And nothing was overlapping from 1200px and up. I made my div/box with “px” and not “vw”, “vh”, etc knowing it wouldnt be responsive/adaptive but it would be okay for this specific task.

Link to code before: Dev Picoo

My Files are: createyourquiz.html , styles.css on the lower part

In the Morning of the presentation i had some questions about if we needed back end and a classmate in a different group showed me the power point that included the requirements that we needed on the web.

after seeing the requirements i consulted with my group and they could not understand what i meant. so i took matters in my own hands and made a plan to make it as interactive as possible with the little time i had. I realized i could do these easily with javascript. So i made everything that was the most important to change first.

The bad thing about working with so little time is that i wasnt able to document all of my code iterations but i can explain how my code works and the logic behind it. i deleted the hardcoded divs and made java script listen to when a button is clicked that it would add the html code of the div to the createyourquiz.html with innerHTMLblock and also used that same logic with the answers. After making it work properly i added so that it had a number counter for the questions and answers (question x: || answer x:) and then i made it so it displays by default 4 answers and after i made it display 1 div of the question container on the page load.

Link to after code: Dev Picoo

THERE ARE TWO STYLESHEETS THE “styless.css” (with two “s”) is the correct one for my page. (i know that it is not recommended to work with more than 1 stylesheet for load times on big projects but due to the time limit this was the fastest and most efficient way i could do it without risking the old code)

I didnt do the which answer would be right when it turns green. But i will explain the logic if i had to do it with javascript. all i would have to do is add an event listener for a click on the (x) and when it would be clicked i would let it change to a (✔) and make the style turn to green and if there was a back end to give this answer a tag so it would keep track of which answer is right.

i made the repository for all of my assignments that will have to be shown and i put them in different folders to be able to show the work like this assignment for the website.

In this Webportfolio project i wanted to focus more on my code and structure following rules like html semantics, commenting on my code, etc.

Link to code: Webportfolio

I developed my webportfolio and the aggregate website at the same time so there will be some similarities

In this project for this company i wanted to focus more on my code just like in the Webportofolio.

I used a.i in this project to help keep my code organized and to help me when i was coding with javascript (i wanted to make my website more dynamic and have loading animations. i let a.i help me here to get a better understanding of what is happening with the animations, parallax effect and with making the mobile toggle menu blurry and not let scroll when its opened.), because i am still learning.

Link to code: Aggregate code