look at attached file
Project Assignment 3: Selecting Icons [31 pts] This exercise helps you setup a controlled environment for timing when icons (images) are clicked on and saving that data to a log file. Then we'll get you started developing an adaptive interaction technique of icon selection. What to Submit: A zip of all the source files, including index.html, renderer.js, styles.css, main.js. Do this for each of the project, and label the folders clearly using the name of the adaptive interaction technique. A sample log file of the saved data created from your app Starting Up We want you to focus more on the code that is needed in the renderer.js file. So start a new Fiddle project, then download the following starter code files: main.js (expands the window to fullscreen) index.html (lays out all the HTML elements) styles.css (styles the HTML elements) renderer.js (some starter code provided) Other files do not need to be changed so you can just use the default files from your new project. After downloading the three files above, replace them in your new project folder. Then download some square images that are at least 50×50 to be used as icons. You will need 5 such images in this assignment. Note that I'm on a Mac and I had trouble using local images. Instead, I placed my images online and used the URL to the images. Once you have the images, open up your project with the starter code. In index.html, you will see the img tag is used twice. The first does not have a source identified, because it is currently used as a placeholder. The second tag has a source identified. Replace the source in the starter code with a URL/filepath for one of your images. After that, you should be able to run your app and see something like this: The app should take up the entire screen as we are trying to replicate a controlled environment scenario. The top displays an instruction to click on an icon, although the image is yet to be placed. There is a start button, and your image should show up somewhere near the bottom. Nothing else should be visible; we don't want to have any distractions. The idea is that this environment will be used to let a study participant complete a series of icon selection tasks so we can see how fast their performance is. It's not very interesting on its own, so you can imagine the study could show different ways of icon placement or responsive behaviours. The main point is that in order to not distract the participant, the app takes the full screen so the participant completing the tasks can focus only on selecting the icons. Note that with the new version of Electron, it has deprecated the default use of "remote" within renderer.js. To fix this, go to webPreferences around line 17 in main.js and change it to the following: webPreferences: { nodeIntegration: true, enableRemoteModule: true } Adding Other Icons We will start to guide you through the steps for completing the assignment. From time to time, we will refer to you tutorial sources rather than providing explicit code examples. Don't worry, we'll go slow this time. The first step is to modify index.html so you add the other icons within the ImageDrawer class. Make sure they have unique id's (otherwise your JS code later won't work). When you are done, your app should look like: Completing the Instruction In your index.html, you will see that the placeholder where the target icon is supposed to be. Use this element's id tag. So at the top of renderer.js, you need to complete the definition for the variable 'indicator' using this tag's information. After that, you will see two variables that also need to be connected to the HTML elements. The first is the 'parent' variable, and the second is the 'icons' array. Make sure to complete these because the 'icons' array is what references all the icons. Next, complete the randomIcon function so that it generates a random number between 0 and 4 (there are a total of 5 images, and 0 is the first index in an array). Stepping back, you will see that this randomIcon function is called every time the timedClick function is called, which is when the start button is pressed. That means, a new, randomly selected icon will be placed in that location every time the start button is pressed. Finally, take a look inside the timedClick function in renderer.js. You can see that the start button is disabled, and then the random target icon is chosen. Before the for loop, you will also see that the variable 'indicator' needs to set its image source. Complete this statement. When this step is completed, your app should work as follows: Adding Timed Events Earlier, we said that when the user (the study participant) clicks on the start button, a timed event starts, then the user clicks on a specific icon (one of the 5 in the ImageDrawer), at which point, the timer event stops. That means, you will need to attach an onclick function to the start button, and an onclick function to each of the 5 images. At the top of renderer.js, you see startButton is defined as the HTML element with the id 'startBtn'. Then, this startButton is called a couple of times inside a function called timedClick. Finally, at the bottom of the file, you see the window.onload function. Overall, this tells you that we have already defined the onclick function for the start button as part of the starter code. So let's focus on the rest of the timing activity. This will all be done inside the timedClick function. Let's go through some of the steps sketched out inside the timedClick function. First, note that this function is executed when the start button is pressed. Which means, we need to start the timer. So do that first. Next, you can add an onclick function to each of the 5 images and end the timer accordingly. So you can see that's the purpose of the for loop here. Now, let's stop that timer and do a bit of time calculation. Can you imagine if the user starts clicking on other icons at this point? That would totally ruin the timers. So let's add a bit of maintenance code. Loop through each of the icon and disable their onclick functions. That's it for the timing activities. To be sure yours is working, you can always add an alert to show you the calculated time. JavaScript is very good at skipping over bugs, so it's hard to know when things aren't working in your code. Make sure to test regularly and to ensure the stuff that was working before doesn't break. I tested mine with an alert: Counting the Trials Each time the user completes an icon selection, a trial has been completed. In a study, we would typically repeat this 50, 100, or even 500 times (can you imaging clicking incessantly?). Here, let's just set a max variable to 10. We can always increase that later if needed. So create a maxTrials variable at the beginning of renderer.js. A couple of things need to happen. As the user is going through the tasks, we want to display how many tasks have been completed. A placeholder was put in index.html already. So in your renderer.js file, you need to grab that HTML element and set it to counterDisplay (near line 22). Make sure to use the right id. You're note that a variable 'clicks' was initially defined for you in the starter code. This variable can be used to keep track of how many icon selection tasks have been completed. That means, each time an icon has been clicked on, the variable should increment. So this happens inside the onclick function (you'll see the comment of where we want you to write that increment statement in the code). After that, display it via the 'counterDisplay' variable. You'll need to modify its 'innerHTML' attribute for this. You can read more about innerHTML at: w3schools. We can have it notify the user that all the tasks are completed when clicks reaches maxTrials. In which case, you will want to reset clicks and clear the temporary variables. When you've completed this step, you should have demo like this: Watch on COSC 341 project assignment 4: displa… Watch later Share Once you remove the intermediary alert boxes, this is basically how your app should work. I've kept them in for now because I want to make sure those times are what gets logged into the log file (which comes next). Saving the Data Okay, we are almost there! The majority of the app functionality is working. The idea is to let the user click on icons based on the randomly generated instruction, and log those times. What's missing now is the data logging. Let's go back to the top of renderer.js and have a look. You should see a variable 'dataLog'. This is what we'll use to keep track of our times. We want to update our data every time a task is completed. So what we'll do is use 'dataLog' as the base, then at the end of each task, we add some data to it. Be careful not to overwrite the existing data; we just want to append to it. So when does the end of a task occur? When an icon has been pressed, which is inside the icon's onclick function. You will see comments that ask you to record the time and positions of the target icon etc. So add your code there. We've already included the code to track the target icon (the random index you generated previously), and the starter code shows you the code used to track which icon was actually clicked on (in 'iconClicked'), now you need to concatenate all those together with the time you calculated previously and append that to 'dataLog'. Lastly, you've probably already noticed that 'dataLog' is used inside the save function. So when all the trials have ended, call the save function. Inside the save function, you may want to change the filepath of where the logged data will be stored. Note that the save function already has an alert, so if you used one previously, you can remove one of them. When you are done, verify that your data is logged properly. You should be able to find a file called JStest.csv on your Desktop. My data log looks like this: Each row has the trial number as the first number, then the targetIndex, then iconClicked, then time. Note