Connections Lab : Project 2

For my second project I chose to continue the development of an idea I had for helping us develop empathy in order to be able to consider the development of new products and experiences. The idea was to create experiments which people could do remotely that replicate a small part of what it might be like to live with a disability. I have several experiment ideas but for this webpage I chose to concentrate on manual dexterity as it is something that will affect all of us in our older age.

I used the following experiment to achieve this.

For the coding of this webpage I used the original page I made but changed some of the CSS to reflect more empathic coloring. I also changed the flow of the page as you move through it. It starts with an explanation of the experiment, follows with everyday items required for the experiment and then features a video and instructions on how to carry out the experiment. The page concludes with a chat box that is a call to action to discuss learnings.

Seems straight forward, right? For my limited capabilities and understanding of coding it was a bit of a challenge. I was able to change things like the CSS and HTML with a little bit of effort but where I struggled was implementing the chat box.

First I started by duplicating the chat box page I had already made. Then I tried to include the ability to load photos to the chat box. Unfortunately I found myself unable to do this. It was becoming a stretch and in order to bring the original page together with the chat box I knew I had to abandon this effort as I knew completing the page was already going to be a big task for me.

I then tried to copy the files I had amended from the original webpage which was now had amended CSS and HTML to the chat pic code in VScode. I also copied all the images and link to the video into this folder. When I tried to get the code to function none of the CSS or any data about style worked and the images would not show up on the webpage.

After lots of copy and pasting and control z-ing I found myself several hours later no further along. I decided to try switching things around a bit.

I opened the file for the chat app we created in class and then brought all the files from my web page across to it. This still did not work! It occurred to me that maybe these files where in the wrong place and I began to put them into the public folder within the chat app code.

Success! All the CSS and styling was now showing on the page. The images and video were there too. Next I had to check the chat box. Opening 2 browsers on chrome through localhost:3000 I got this to function.