Web Design

NEW: I have added a collection of snapshots of JavaScript FlashCard assignments done by prior students to help you imagine how this assigment might look. In previous years, many students have had to refine their assignment 2 or 3 times. Some things to look out for, use multiple JavaScript functions to divide up the work into smaller pieces that are easier to design and debug. Note that JavaScript does not support classes, so stick to using functions. Also, remember what you learned from assignment 1 about making the page work even if the browser is resized smaller or larger and use % for sizing elements as much as practical.

This assignment involves significant coding. It will take time to construct and to get it to work correctly. For that reason, it has two due dates. One for submitting something that has all the parts (for the first 100 points), and one for submitting the finished and polished result (for the other 100 points). The first part is due October 22. The second and final part is due October 29th. To implement this project you must write JavaScript code and use it in your Web page. In the code, you will need at least two arrays, one that contains the URLs of the images to be used one that contains names that go with the images. You may also want other arrays, (i.e. one for the 4 buttons or one for the randomized order in which to show the images). You should be able to construct this assignment by following the examples in the Deitel book. You may use other references on the Web to find clever things to do, but you may not copy code from such sources. If I am suspicious, I will search the Web for snippets of code if I find things in your page other than would you would normally write if you wrote this from scratch.

Finding a Workable Solution to the JavaScript Flash Card Assignment Read these hints only if (a) you have yours working, or (b) you are stuck.

Some of you may be struggling with the assignment because you have chosen a strategy that is leads you to having to solve complex challenges. If you want to be a better programmer, think through all the possible strategies you can come up with first before reading these hints. Then ponder what ideas you tried, what assumptions you made, and how close you came to having a manageable solution.

As a hint, here is a lesson in design. When faced with a challenge, you have three choices, 1) face the challenge and try to control the difficulty, 2) try to minimize the challenge by skilled design, 3) rethink the design and avoid the challenge entirely. This choice is true whether the challenge is complexity, robustness and reliability, or security and vulnerability.

The challenge here is to provide sufficient randomness so the user doesn’t see a pattern.  You don’t want the correct choice to always be the same button.  You don’t want to visit the pictures in the same order every time.  You don’t want the same name to show up in more than one button.  You want to remember which button holds the correct answer.

The brute force approach is to do something random each time you select the next picture, or choose names to populate buttons with a wrong choice. But that approach doesn’t protect against any of the above. Adding logic to address these issues is way complicated. A disciplined approach can help, but is not needed. The real problem isn’t that it is complicated. The real problem is assuming that the solution requires you to make a random choice, as if it means choosing one at random from a set.

Rethink the problem as one of shuffling. Shuffle the order in which you visit the pictures. Shuffle the order before choosing three wrong answer in sequence. Shuffle the buttons before assigning the choices to the buttons. Then there is no issue with duplicates or repetition.

It is cumbersome to shuffle your actual pictures, names, and buttons, not to mention risky since the names and pictures have to match. Instead, we use a map that contains array indexes and shuffle that. We go through the map in order, where each element in the map array points at an element of the actual array, but in random order (not 0, 1, 2, …). Since each index appears exactly once in the array, repetition is not an issue.

Finally, here is some JavaScript code for pieces of the solution you can use to get closer. (By the way, in my solution, the two arrays of picture URLs and name strings are loaded from a separate .js file, so the same page can be used for any set of things to be learned.)

Plug for CS program: The Data Structures and Algorithms classes provide students with a broad array of solution strategies that they can use for addressing challenges like this, and many more.

/* These variables hold indexes to be used for random orderings */

/* Create a random order for going through the pictures */

var order = []; /* Randomize indexes for the 4 choices. To show choices, * * swap the correct choice with 0, then just use the first 4 */

var map = []; /* Since correct choice is always 0, randomize the order of buttons */

var btnMap = [0, 1, 2, 3];

/* Populate an array with length index values in sequence */

function populateSequence(arr, length)

{

for (i = 0; i < length; i++) arr.push(i);

}

/* Shuffle an array */

function shuffle(arr)

{ for (i = 0; i < arr.length; i++)

{ var j = Math.floor(Math.random() * arr.length);

var temp = arr[i];

arr[i] = arr[j];

arr[j] = temp;

}

}

/* Shuffle, then swap correct answer with first element */

function shuffleMap(indexOfAnswer)

{ shuffle(map);

for (i = 0; i < map.length && map[i] != indexOfAnswer; i++);

var temp = map[0];

map[0] = map[i];

map[i] = temp;

}

/* In listener, check if button pressed shows correct answer *

* In shuffleMap() we put index of current picture in map[0] */

function check()

{

if (this.getAttribute("value") == answers[map[0]])

{

score++; . . . /* show results, etc. */

}

}

https://www.google.com/search?hl=en&source=hp&ei=6F3xWaaaOY3ujwObza7gAg&q=javascript+button+onclick+counter&oq=javascript+button+onclick+cou&gs_l=psy-ab.3.0.0j0i22i30k1.5833.16979.0.19145.21.19.2.0.0.0.159.2577.0j19.19.0....0...1.1.64.psy-ab..0.21.2592...46j0i131k1j0i46k1.0.lNTm43wrohs

https://stackoverflow.com/questions/46078095/count-correct-answers-with-button-onclick

https://codepen.io/juliogcampos/pen/BzdjwY

https://forums.asp.net/t/1843268.aspx?Button+click+count+using+javascript