Functionality:
User will need to answer 1 simple question with 4 options. Each option is appended with a different image. Hence, a new page with the appended image will be displayed depending on which option that the user has chosen.
Therefore, this is the general flow :
Page A-> displays a question with 4 options for the user to select. Depending on which option that the user selects. It will navigate to Page B and display the image that is associated with the option selected by the user.
What has been done:
I have created a page for the question and 4 options as well as a 2nd page that will show the appended image depending on the option that the user has selected.
This is the code that I have done:
var random_Question,
random_BrandIndex,
optionList,
PrintSelectedOffer;
//Append array of images to list container in alphabetical Order
var x = 0,
number = 0;
var printOptionFrame = "";
//Brand Offers
var Outlook_list = [];
//Set Array bank of Questions
var QuestionOrder = ["A?", "B?", "C?", "D?", "E?"];
//Set Array bank of Answers
var ChoiceOrder = [
["Shpinge", "Vacation", "Sav", "Donate"],
["Responsibles", " Foreign ", "Gourmet ", "Martial "],
["A ue Sea", "Rn Grass", "Dark F Trees", "WaterfallRainbow"],
["Cooking", "Traling", "Playing", "Shg"],
["Fabok", "Insram", "Snhat", "Seie?"]
];
//Print Array
var PrintOrder = [
["A01", "A02", "A03", "A04"],
["A03", "A05", "A04", "A06"],
["A02", "A03", "A06", "A04"],
["A04", "A05", "A03", "A01"],
["A03", "A04", "A02", "A06"]
];
function Start() {
idleTime = 0;
$("#Start").fadeOut();
$("#QuestionPage").fadeIn({
complete: function() {
//Show Original Answer Point
$("#Pointer_1").show();
$("#Pointer_2").show();
$("#Pointer_3").show();
$("#Pointer_4").show();
//Show Question and Answers
showQuestion();
}
});
}
function showQuestion() {
//Randomised Question Array List
random_Question = Math.floor(Math.random() * QuestionOrder.length);
//Push randomised question array into empty array reference
Outlook_list.push(random_Question);
console.log("Outlook_list:" + "[" + Outlook_list + "]");
$("#GamePageOption_1").attr("class", "original_brightness");
$("#GamePageOption_2").attr("class", "original_brightness");
$("#GamePageOption_3").attr("class", "original_brightness");
$("#GamePageOption_4").attr("class", "original_brightness");
$("#Option_selected_1").hide();
$("#Option_selected_2").hide();
$("#Option_selected_3").hide();
$("#Option_selected_4").hide();
$("#Page_question").html(QuestionOrder[random_Question]);
optionList = ChoiceOrder[random_Question];
$("#GamePageOption_1").html(optionList[0]);
$("#GamePageOption_2").html(optionList[1]);
$("#GamePageOption_3").html(optionList[2]);
$("#GamePageOption_4").html(optionList[3]);
}
function select_option(flag) {
idleTime = 0;
//Play with brightness of selected option
if (flag == 1) {
$("#Option_selected_1").show();
$("#GamePageOption_2").attr("class", "decrease_brightness");
$("#Pointer_2").attr("class", "decrease_brightness");
$("#GamePageOption_3").attr("class", "decrease_brightness");
$("#Pointer_3").attr("class", "decrease_brightness");
$("#GamePageOption_4").attr("class", "decrease_brightness");
$("#Pointer_4").attr("class", "decrease_brightness");
} else if (flag == 2) {
$("#Option_selected_2").show();
$("#GamePageOption_1").attr("class", "decrease_brightness");
$("#Pointer_1").attr("class", "decrease_brightness");
$("#GamePageOption_3").attr("class", "decrease_brightness");
$("#Pointer_3").attr("class", "decrease_brightness");
$("#GamePageOption_4").attr("class", "decrease_brightness");
$("#Pointer_4").attr("class", "decrease_brightness");
} else if (flag == 3) {
$("#Option_selected_3").show();
$("#GamePageOption_1").attr("class", "decrease_brightness");
$("#Pointer_1").attr("class", "decrease_brightness");
$("#GamePageOption_2").attr("class", "decrease_brightness");
$("#Pointer_2").attr("class", "decrease_brightness");
$("#GamePageOption_4").attr("class", "decrease_brightness");
$("#Pointer_4").attr("class", "decrease_brightness");
} else if (flag == 4) {
$("#Option_selected_4").show();
$("#GamePageOption_1").attr("class", "decrease_brightness");
$("#Pointer_1").attr("class", "decrease_brightness");
$("#GamePageOption_2").attr("class", "decrease_brightness");
$("#Pointer_2").attr("class", "decrease_brightness");
$("#GamePageOption_3").attr("class", "decrease_brightness");
$("#Pointer_3").attr("class", "decrease_brightness");
}
setTimeout(function() {
$("#QuestionPage").fadeOut();
$("#Description").fadeIn({
complete: function() {
//show outlook description
printOptionFrame = PrintOrder[optionList];
console.log("printOptionFrame: " + printOptionFrame);
$("#DescriptionBlock").attr('src', printOptionFrame).show();
}
});
}, 1000);
}
<div id="QuestionPage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=2; top:0px; left:0px; margin:auto;">
<!--MainStart Image-->
<img id="Background" src="lib/image/Background.png" style="position:absolute; top:0px; left:0px; margin:auto;" />
<!-- Question -->
<div id="Page_question" style="position:absolute; font-family:AgendaSemiBold; z-index:3; top:515px; left:180px; margin:auto; color:#FFFFFF; font-size:30px; width:800px;"></div>
<!-- Answer List -->
<div id="GamePageOption_1" style="position:absolute; font-family:AgendaBold; z-index:3; top:854px; left:317px; margin:auto; color:#FFFFFF; font-size:25px; width:750px; text-align: justify;"></div>
<div id="GamePageOption_2" style="position:absolute; font-family:AgendaBold; z-index:3; top:986px; left:317px; margin:auto; color:#FFFFFF; font-size:25px; width:750px; text-align: justify;"></div>
<div id="GamePageOption_3" style="position:absolute; font-family:AgendaBold; z-index:3; top:1098px; left:317px; margin:auto; color:#FFFFFF; font-size:25px; width:750px; text-align: justify;"></div>
<div id="GamePageOption_4" style="position:absolute; font-family:AgendaBold; z-index:3; top:1214px; left:317px; margin:auto; color:#FFFFFF; font-size:25px; width:750px; text-align: justify;"></div>
<!--Original Option Point -->
<img id="Pointer_1" src="lib/image/OriginalOptionPoint.png" style="display:none; position:absolute; z-index:4; top:836px; left:180px; margin:auto;" />
<img id="Pointer_2" src="lib/image/OriginalOptionPoint.png" style="display:none; position:absolute; z-index:4; top:962px; left:180px; margin:auto;" />
<img id="Pointer_3" src="lib/image/OriginalOptionPoint.png" style="display:none; position:absolute; z-index:4; top:1077px; left:180px; margin:auto;" />
<img id="Pointer_4" src="lib/image/OriginalOptionPoint.png" style="display:none; position:absolute; z-index:4; top:1193px; left:180px; margin:auto;" />
<!-- Selected Option Point -->
<img id="Option_selected_1" src="lib/image/SelectedOptionPoint.png" style="display:none; position:absolute; z-index:5; top:836px; left:180px; margin:auto;" />
<img id="Option_selected_2" src="lib/image/SelectedOptionPoint.png" style="display:none; position:absolute; z-index:5; top:962px; left:180px; margin:auto;" />
<img id="Option_selected_3" src="lib/image/SelectedOptionPoint.png" style="display:none; position:absolute; z-index:5; top:1077px; left:180px; margin:auto;" />
<img id="Option_selected_4" src="lib/image/SelectedOptionPoint.png" style="display:none; position:absolute; z-index:5; top:1193px; left:180px; margin:auto;" />
<!-- Selection of answer -->
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:6; top:854px; left:0px; margin:auto; color:#FFFFFF; font-size:25px; width:1080px; height:80px;" onclick="select_option(1);" />
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:6; top:986px; left:0px; margin:auto; color:#FFFFFF; font-size:25px; width:1080px; height:80px;" onclick="select_option(2);" />
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:6; top:1098px; left:0px; margin:auto; color:#FFFFFF; font-size:25px; width:1080px; height:80px;" onclick="select_option(3);" />
<img src="lib/image/transparent.png" class="transparentBg" style="position:absolute; z-index:6; top:1214px; left:0px; margin:auto; color:#FFFFFF; font-size:25px; width:1080px; height:80px;" onclick="select_option(4);" />
<button class="MainReset" onclick="Reset()"></button>
</div>
<div id="Description" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=7; top:0px; margin:auto;">
<!--Video Div-->
<!-- <div id="UOB_DescriptionVideo" style="position:absolute;"></div> -->
<!--MainStart Image-->
<img id="DescriptionBackground" src="lib/image/Description.png" style="position:absolute; top:0px; left:0px; margin:auto;" />
<img id="DescriptionBlock" style="position:absolute; top:0px; left:0px; margin:auto;">
</div>
Issue:
When I clicked on the option, no element from the array of PrintOrder is displayed on Page B. As in the img id of DescriptionBlock is not displayed. Hence, I am unable to call the associated image after I have clicked on the option from Page A.
Hence, I would need some assistance and what have I done wrong? Please. Thank you.
Aucun commentaire:
Enregistrer un commentaire