lundi 31 octobre 2016

Image is not displayed correctly when user clicks on button

Functionality:

In page A, user needs to answer a question with 4 options. When user clicks on any 1 option, the current page will navigate the user to Page B where, an image will be displayed depending on the option that the user has chosen.

Therefore, this is the general flow:

Page A: 1 randomly generated question and 4 associated options to the question will be displayed -> user clicks on one of the option -> page A will navigate to page B. In page B, an image will be displayed depending on the option that you have selected in Page A.

What I have done:

I have created 3 arrays:

FOR Randomly Generated Questions:

var QuestionOrder = ["What is A?", "What is B?", "What is C?"];

FOR 4 options to the question shown:

var ChoiceOrder = [["test1", "test2", "test3", "test4"], ["test5", "test6", "test7", "test8"], ["test9", "test10", "test11", "test12"]];

Image to be shown in Page B depending on option selected in Page A:

var DescriptionOrder = [["testA1.png", "testA2.png", "testA3.png", "testA4.png"], ["testB1.png", "testB2.png", "testB3.png", "testB4.png"], ["testC1.png", "testC2.png", "testC3.png", "testC4.png"]];

Therefore, when user clicks on "test1", it should display ->"testA1.png" or when user clicks on "test12", it should display ->"testC4.png" or when user clicks on "test8", it should display ->"testB4.png" etc...

Code:

Plunker : http://ift.tt/2e5xvvN

Issue:

I am currently able to display the image element from the array var DescriptionOrder after the user has selected from Page A.

However, the issue that I am currently facing is this:

The wrong behaviour:

when I clicked on "test1", it is not displaying ->"testA1.png" but displaying -"testB4.png" or when user clicks on "test12", it is not displaying ->"testC4.png" but displaying -"testA2.png" or when user clicks on "test8", it is not displaying ->"testB4.png" but displaying -"testC2.png"etc...

The correct behaviour:

Therefore, when user clicks on "test1", it should display ->"testA1.png" or when user clicks on "test12", it should display ->"testC4.png" or when user clicks on "test8", it should display ->"testB4.png" etc...

Meaning, it looks like the array var DescriptionOrder is randomised and not associated based on the inner indices of the array.

What have i done wrong?? I need some help pls.

Thanks.




Aucun commentaire:

Enregistrer un commentaire