Reflection on Interactive Websites (Leon and Nimrah) – Haider Ali

The first website that I chose:
http://blacknegative.com/#!/whoweare/
Just to give an overview, “blacknegative” is a website that showcases the work of directors, motion designers, photographers, web designers. What I love about this website is that how interactive it is and tries to indulge the user to wonder more about what is going on with each and every image. Furthermore, I really like the trajectory of sound within the website and how it changes as I move to the other sections of the website. Not only is this website only user-friendly but also happens to fully engage the user the entire time. I have a short attention span, as a result of which what usually happens is that I either start checking my phone or doing something else in the midst of checking a website/webpage. Surprisingly this time when I was scrolling through the website I managed to glue my eyes towards the screen the entire time for like 3-4 minutes straight. I also like how this website is full of surprises as hovering over certain icons end up showing something completely different. The highlight of my user experience regarding this website was how I could click on “Launch City of Light” and that button ended up showing me an interesting visual(s) of Paris, and actually makes me feel that I am there and part of the experience. The choice of sound used in the website is also quite soothing.

The second website that I chose:
https://www.evoenergy.co.uk/uk-energy-guide/
I really like graphs, histograms, pie charts, and big data and this website showcases the perfect representation of all these different types of data sets in the most interactive way possible. This website happens to showcase the data of energy consumption in the UK (over four decades) in a quite fun, interactive, and engaging manner. My favorite part of this website was the “Final Energy Consumption by Sector” section where I could click on each icon at the left-hand side that would eventually show pie charts of the changing levels of consumption. I also like the use of colors, as they neither dull nor too bright. I really liked playing around with this website and surprisingly ended up spending a lot of time on this website than originally anticipated. My only critique is that the website could actually work on is that they could possibly have a pop up a page that can corroborate their findings.

 

Week 5: In-class Exercise (Krom)

Dania has posted the link to our group’s in-class exercise of this week, and below is my documentation.

For this in-class exercise, our group decided to complete it separately and then compare everyone’s code. I think this is the hardest in-class exercise for me so far because I met several problems during the class. At first, I didn’t look the css file and thought that the in-class exercise was similar to the example of multiple conditions, so I used style.backgroundColor tag. But it didn’t work. Our fellow Jiwon told me that I should read the css file carefully, and I realized that the background color of each square had already been blue but it was invisible right now. I struggled for a long time but I failed. Thanks to my professor, she guided me step by step and I realized that what I needed to pay attention to was display (“none” and “block”). I changed the tag to style.display, and made the display of the square that I wanted to be blue “block” and others “none,” thus managing to finish the in-class exercise in class for the first time! Comparing with my group members’ codes, my code is almost the same as Dania’s.

When I read the hints in the slides, I noticed the hint of boolean variables, so I also wanted to find out another way to code. I followed the example of boolean variables in the slides but it didn’t work. So I turned to our amazing fellow Jiwon again. She told me that I should set different variables and define them as false at the beginning of the script. She also told me that instead of typing “tr = false; bl = false; br = false;” row by row, I could directly combine them to “tr = bl = br = false;” in one row, which could make the code simpler.

This in-class exercise helps me a lot because it not only enables me to practice more, but also makes me realize that I still have a lot to improve.

Week 5: JavaScript Exercise (Krom)

Link: http://imanas.shanghai.nyu.edu/~mfh318/week5/

To begin this exercise we first decided to look at the in-class examples as a baseline to help us figure out what to do. We looked at the “mouse position” exercise since it seemed to be closest to what we needed to complete the exercise. The task was to make a box blue when clicking on it, but have another box turn blue when clicked on without saving the info from the previous box. Using the “mouse position” code as a model, we copied what as going on in that code but edited it to fit the needs of our project.

We started by calling the x and y position and then setting conditions of the x and y positions for each box based on the box size. Since each box was labeled, it was easy.
We started by trying to code the topleft box. At first, it didn’t work because we forgot the document already had CSS and were trying to change the color of the box by inputting style.backgroundColor=”blue”. We then realized the document already had blue in the CSS and we just needed to have the blue displayed so we instead we put in style.display= “block”. This made it so that the box we called turned blue. We did the same process with the next box (topright) and it worked, but the topleft box was still blue. To fix this, we had to set more conditionals and added that if a click was positioned within a box, it would display the blue, but also hide the blue in the other boxes. After figuring this out, we copy-pasted code and just made sure to turn the display off (by coding style.display=”none”) for any box besides the box that was clicked.

At the very end, we opened up the document and nothing worked. However, we just forgot to close everything with a “}” and once this was added, everything worked perfectly.

-Documentation by Risha and Sophia

Week 4: JavaScript Exercise 2 (Krom)

http://imanas.shanghai.nyu.edu/~rx367/js-exercise-2/

The goal of this exercise was to change the color of the box clicked to blue while the others stayed clear. To accomplish this, I first looked at the existing code and realized that the CSS was set up in such a way that changing the display property of the inner divs would make the boxes blue. I used the event.clientX and event.clientY globals to keep track of the location of the mouse. Also, I noticed that the ids of the boxes were consistently named. For example, the box in the upper left was named #topleft and the box in the upper right was named #topright. To take advantage of this, I created two variables, vertical and horizontal that matched this format. The vertical variable holds either top or bottom and horizontal holds left or right depending on where the user clicks. Knowing that the entire div is 500 pixels in both height and width, I checked whether the user clicked past the halfway mark of 250 pixels for both the y-axis and the x-axis. I could select the correct box by combining the two variables when selecting by ID. At the beginning of the function, I reset the previously changed box by changing its display property to none. At the end of the function, I changed the selected box to blue by changing its display property to block. I created the variables outside of the function allowing the variables to be saved between function calls.

Week 4: Comic Update (Krom)

http://imanas.shanghai.nyu.edu/~rx367/comic/

Overview:

Our idea for the interactive comic is to have a story that can be told in both chronological and reverse chronological order. The basic plot is a love story that goes wrong and ends in a murder. We will set up a split screen and show two perspectives at once. When the reader scrolls, the top screen will scroll to the right and show the chronological order. The bottom screen will scroll to the left and show the reverse chronological order.

Interaction:

The reader will be able to scroll to move the slides along. There will be buttons in the panels that will further the dialogue to help better understand the story. With the story making sense both in both forward and reverse order, the extra dialogue will provide some clarity to the panels. The reader will also be able to select what time the story begins by moving the clock at the top of the page.

Webpage:

With some basic JavaScript I was able to implement many of the interactive features. I applied a transform: translateX() to shift the divs containing the top and bottom slides. By adding an event listener to the wheel event of the window, I could detect when the user scrolled. I disabled the normal scrolling and instead increased the translateX for the bottom slides and decreased it for the top slides. When scrolling, the clock also moved forward or backwards depending on whether the user scrolled up or down. Although there are only 4 canvases for the top and bottom, I could reuse them by continuously shifting the slides back. This method works for now, but it might have to change when the slides have art on them. With art on the slides, they may flicker when the slides are shifted backwards, but for now the transition seems to be invisible.

I also implemented a clock with a canvas. For the clock background, I applied a CSS background and for the clock hands, I used JavaScript. Using a global dictionary consisting of an hour and a minute, I calculated the angle the minute and hour hand needed to be drawn. To advance time, I redrew the clock every time the minute hand moved.

 

Initial Page                                                            After scrolling

Week 5: Tiger and Kaitlin In Class JS Exercise (Leon & Nimrah)-Kaitlin & Tiger

This is the link to Tiger and I’s in-class mini exercise. http://imanas.shanghai.nyu.edu/~jt3321/week5recitation/

Below is a screenshot of Tiger’s code.

For the following exercise, we started out by looking at the html sheet. We realized that each section of the box was already designated a certain id so we could just re-utilize the names. We just had to simply link the html page with the external javascript page first.

Then we assumed that we needed to name our variables for the actual sections of the boxes, but we realized that the variables needed to be specified for the X and Y axis first in order for the screen to recognize the mouse position within each box. After we declared our variables, we used “console.log(X);” to double check that our javascript page was correctly linked and that our variables were detected. Next we decided to use the “if…else if…” option to layout the basis of our project. However, to acquire the right width and height for the boxes we had to look at the css style sheet to check the width and height of the boxes. After this we had to do some math to correctly specify the X and Y limits within each box for each box to correctly change color.

At first, we thought that we needed to use “.style.backgroundColor = blue” to change the color of the box, but after observing the css style sheet, we realized that that was wrong. Instead, we needed to use “.style.display = block” for the indicated box to change to blue. Afterwards, tiger noticed that in order to change one box to blue while keeping the rest of the three boxes white, we needed to specify the remaining boxes to “.style.display = none” for each section. Depending on the position of the box, we had to manipulate the X and Y axis accordingly and manipulate the color by specifying it in the correct region.

Overall, this was a stressful experience, but I am so glad Tiger seems to have a better grasp at this coding thing compared to me. I do not think I could have figured all this out by myself. Through this partnered assignment, I also got to learn a lot from Tiger.

Week 4: Variables & Conditionals Javascript exercise (Moon)

Partner: Jerry

Link: http://imanas.shanghai.nyu.edu/~qc483/js-exercise-2/

Content:

  1. If the users click four different boxes one by one, the background color of the corresponding box will show up but the color of the other three boxes is still invisible.
  2. If the users keep clicking on one box, its background color will gradually change from light to dark color.

Process:

Before defining the function checkLocation(), I first change the display none to display block and set the opacity to be 0 by adding the following code to the inline script.

Then, I try to find out the x coordinate and y coordinate of each box and set condition of their ranges (such as x>10 && x<260 && y>10 && y<260) in order to make the click effect of each box appear only if the users click right inside that box. After using the if-else if-else statements to build the whole framework, I start to create the effect of showing up background color in each condition. Since I have already set the opacity to be 0 and displayed the block, I just increase the opacity by using the statement like …opacity=…opacity+0.2 every time the function is called. In addition, when the value of the opacity is larger than 1, I set it to 0 again by using the if statement. At first, my code does not work well and the background color can only change once. But with the help of Jerry, I notice that I should add parseFloat() function to the …opacity so that its value can be converted into float and added correctly.

Finally, I focus on how to make only one background color appear. Since when the users click on one box, the opacity of this certain box is changed but when they click on another box, the opacity of the previous box does not return to 0, I need to set the opacity of the other three boxes to 0 again in each condition.

Overall, although I am satisfied with the effects of this website, there can still be some improvements in the coding part. One of the problems is that there are actually a lot of repetition elements in the script which makes the code really lengthy.

By Qinfei Chen (Sophie)

Week 5: Variables & conditionals mini exercise (Moon)

  • Lab Date: Feb. 22nd, 2018
  • Documentation Date: Feb. 22nd, 2018
  • Documented by: Vivian
  • Instructor: Moon
  • Partner: Claudia
  • Main Target: when click a box it turns to be blue while others remain white
  • Link: http://imanas.shanghai.nyu.edu/~yy1874/js-exercise-2/
  • Process: 

Today I teamed up with my partner Claudia to finish this mini exercise in class. We were asked to add the javascript interactions where if you click  a box it will turn to blue while other boxes remain white.

At first, I tried to add another function ‘check()’ on the topleft div, however, since is code is read from top to bottom, the order of different functions is chaotic when a specific function is called. So under Moon’s suggestion, I gave up adding the interaction by using different function names. Then the only way I can make it work is by using “if” conditional statements to change the color by tracking the mouse X and Y pixels.

Here when adding “if” statement I made a small mistake: I didn’t name variables X and Y within the function checkLocation(), so at the beginning when I ran the code it didn’t work.

After that, I classify the four different box areas by the scale of X and Y pixels and connect the conditions with “||”, which is another mistake i made during the class – “||” means “or” but I took it as “and”, which is supposed to be “&&”. So with the help of learning assistant, we found out the mistake and make the code work successfully.

What’s more, in order to be more accurate to every pixel, when scaling the scope of X and Y we should also take into consideration of the padding and/or margin pixel if there are any.

<!DOCTYPE html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="js/script.js" type="text/javascript"></script>
</head>

<body>

	<div class="outerrect" onclick="checkLocation()">

		<div class="innerrect" id="topleft" ></div>
		<div class="innerrect" id="topright" ></div>
		<div class="innerrect" id="bottomleft"></div>
		<div class="innerrect" id="bottomright"></div>

		<div class="vertdivide"></div>
		<div class="horizdivide"></div>

	</div>

	<script>
		function checkLocation() {
			var x = event.clientX;
			var y = event.clientY;

			// document.getElementById("topleft").style.display= "block";
			// document.getElementById("topleft").style.opacity=1;
			if (x < 250 && y < 240){
				document.getElementById("topleft").style.display= 
				"block";
				document.getElementById("topright").style.display= 
				"none";
				document.getElementById("topleft").style.opacity=1;
				document.getElementById("bottomleft").style.display= 
				"none";
				document.getElementById("bottomright").style.display= 
				"none";
			}
			if (x > 264 && y < 240){
				document.getElementById("topright").style.display= 
				"block";
				document.getElementById("topleft").style.display= 
				"none";
				document.getElementById("topright").style.opacity=1;
				document.getElementById("bottomleft").style.display= 
				"none";
				document.getElementById("bottomright").style.display= 
				"none";
			}
			if (x < 250 && y > 264){
				document.getElementById("bottomleft").style.display= 
				"block";
				document.getElementById("topleft").style.display= 
				"none";
				document.getElementById("bottomleft").style.opacity=1;
				document.getElementById("topright").style.display= 
				"none";
				document.getElementById("bottomright").style.display= 
				"none";
			}
			if (x > 264 && y > 240){
				document.getElementById("bottomright").style.display= 
				"block";
				document.getElementById("topleft").style.display= 
				"none";
				document.getElementById("bottomright").style.opacity=1;
				document.getElementById("bottomleft").style.display= 
				"none";
				document.getElementById("topright").style.display= 
				"none";
			}
			

			
		}
	</script>
</body>