For some this may be a simple tasks but for others like my self i cant figure it out, im creating an online exam simlulator which has a total of 36 questions, im using the JS Formwizard to achieve the functionality im looking for which i found here
http://www.dynamicdrive.com/dynamicindex16/formwizard.htm its the first one in red, when the user gets to the last question number 36 the next button is hidden which is fine because there are no other questions to ask, but what i need to do is some how
when question 36 is shown, make my btnfinish button visible that way the user can press it and it will calculate the pass rate etc and carry on with the application my question is this how can i use Jquery to determin what question is shown and if its 36 show
the button? this is just a small snippet of how my HTML looks as i dont want to paste the lot as its quite long.
<fieldset class="sectionwrap" id="Q1">
<legend>Question 1</legend>
<p>
Which one of this five words means the same as <strong>TIRED</strong>? Write the number in the Answer
Square.</p>
<ol>
<li>LATE</li>
<li>CLIMB</li>
<li>HEAVY</li>
<li>WEARY</li>
<li>SLOW</li>
</ol>
<p style="margin-left:-5%">
<asp:TextBox ID="Q1Answer" runat="server" class="TextBox" />
</p>
</fieldset>
<fieldset class="sectionwrap" id="Q2">
<legend>Question 2</legend>
<p>
One of these numbers is wrong, because is does not follow the regular order of the
other numbers in the row.<br />
Write the number which is wrong in the Answer Square</p>
<p style="margin-left: 32%">
<strong>2 4 6 8 10 11 14 16</strong>
</p>
<div class="WhiteSpace">
</div>
<p style="margin-left: -5%">
<asp:TextBox ID="Q2Answer" runat="server" class="TextBox" />
</p>
</fieldset>
<fieldset class="sectionwrap" id="Q3">
<legend>Question 3</legend>
<p>
LID is related to BOX as CORK is related to......?<br />
Write the number of the correct word in the Answer Square.
</p>
<ol>
<li>WATER</li>
<li>LIFE BELT</li>
<li>BOTTLE</li>
<li>TREE</li>
<li>FLOAT</li>
</ol>
<p style="margin-left: -5%">
<asp:TextBox ID="Q3Answer" runat="server" class="TextBox" />
</p>
</fieldset>
As you can see every question has an ID of Q1, Q2, Q3 etc so when it gets to ID Q36 this is where i need the magic to happen....... can someone please help me with this.
Ok so the above does work but its not the effect i wont sadly thr button slides in with the question from the right hand side of the screen whilst the other button "back" stays there which is fine, so i have written extra code in the formwizard js file which
creates this button the same way as the other two and its set to visible = false on pageload, when the Q36 is shown it then becomes visible but my problem is this how can i make that button go back to the home page and run the method for that button click?
this is what i have in the formwizard js file
var $paginatediv = $('<div class="formpaginate" style="overflow:hidden; width:570px;"><span class="prev" id="BtnPrev" style="float:left">Back</span> <span class="status">Q 1 of </span> <span class="next" id="BtnNext" style="float:right">Next</span><span class="next" id="BtnFinish" visible="false" runat="server" onclick="BtnFinish_Click" style="float:right">Finish</span></div>')// Last span is the finish button
the button is the last one in the Span tags when i click this button it says "BtnFinish_Click" is underfined, if someone can help make this button post back to the code behind i would highly appreciate it.
If you see the documentation of the plugin you can see it accept a function-
onpagechangestart:function(){}
This function takes three parameter, first is the container object, second is the index of the field set and third is the current field set. You can use this function for enabling the button.
Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Harrison.Sco...
Member
321 Points
456 Posts
How to show a button when a certain question is shown
Apr 07, 2012 10:43 AM|LINK
Hi Guys,
For some this may be a simple tasks but for others like my self i cant figure it out, im creating an online exam simlulator which has a total of 36 questions, im using the JS Formwizard to achieve the functionality im looking for which i found here http://www.dynamicdrive.com/dynamicindex16/formwizard.htm its the first one in red, when the user gets to the last question number 36 the next button is hidden which is fine because there are no other questions to ask, but what i need to do is some how when question 36 is shown, make my btnfinish button visible that way the user can press it and it will calculate the pass rate etc and carry on with the application my question is this how can i use Jquery to determin what question is shown and if its 36 show the button? this is just a small snippet of how my HTML looks as i dont want to paste the lot as its quite long.
<fieldset class="sectionwrap" id="Q1"> <legend>Question 1</legend> <p> Which one of this five words means the same as <strong>TIRED</strong>? Write the number in the Answer Square.</p> <ol> <li>LATE</li> <li>CLIMB</li> <li>HEAVY</li> <li>WEARY</li> <li>SLOW</li> </ol> <p style="margin-left:-5%"> <asp:TextBox ID="Q1Answer" runat="server" class="TextBox" /> </p> </fieldset> <fieldset class="sectionwrap" id="Q2"> <legend>Question 2</legend> <p> One of these numbers is wrong, because is does not follow the regular order of the other numbers in the row.<br /> Write the number which is wrong in the Answer Square</p> <p style="margin-left: 32%"> <strong>2 4 6 8 10 11 14 16</strong> </p> <div class="WhiteSpace"> </div> <p style="margin-left: -5%"> <asp:TextBox ID="Q2Answer" runat="server" class="TextBox" /> </p> </fieldset> <fieldset class="sectionwrap" id="Q3"> <legend>Question 3</legend> <p> LID is related to BOX as CORK is related to......?<br /> Write the number of the correct word in the Answer Square. </p> <ol> <li>WATER</li> <li>LIFE BELT</li> <li>BOTTLE</li> <li>TREE</li> <li>FLOAT</li> </ol> <p style="margin-left: -5%"> <asp:TextBox ID="Q3Answer" runat="server" class="TextBox" /> </p> </fieldset>As you can see every question has an ID of Q1, Q2, Q3 etc so when it gets to ID Q36 this is where i need the magic to happen....... can someone please help me with this.
Thank you for your time.
avinash_bhud...
Contributor
2881 Points
517 Posts
Re: How to show a button when a certain question is shown
Apr 07, 2012 11:04 AM|LINK
You can have <input type="submit" /> in your final question ( ID - 36) which you can use for submit the data.
This button will be automatically shown when Q-36 is displayed.
e.g.
<fieldset class="sectionwrap" id="Q36"> <legend>Question 36</legend> <p> Some Question here. </p> <ol> <li>option1</li> <li>option2</li> <li>option3</li> <li>option4</li> <li>option5</li> </ol> <p style="margin-left: -5%"> <asp:TextBox ID="Q3Answer" runat="server" class="TextBox" /> </p> <input type="submit" Test="Submit" /> </fieldset>Harrison.Sco...
Member
321 Points
456 Posts
Re: How to show a button when a certain question is shown
Apr 07, 2012 11:07 AM|LINK
Of course!!! why on earth did i think i had to do it in jquery! see this is what happens when you have hardly no sleep the night before!! thanks.
Harrison.Sco...
Member
321 Points
456 Posts
Re: How to show a button when a certain question is shown
Apr 07, 2012 01:21 PM|LINK
Ok so the above does work but its not the effect i wont sadly thr button slides in with the question from the right hand side of the screen whilst the other button "back" stays there which is fine, so i have written extra code in the formwizard js file which creates this button the same way as the other two and its set to visible = false on pageload, when the Q36 is shown it then becomes visible but my problem is this how can i make that button go back to the home page and run the method for that button click?
this is what i have in the formwizard js file
var $paginatediv = $('<div class="formpaginate" style="overflow:hidden; width:570px;"><span class="prev" id="BtnPrev" style="float:left">Back</span> <span class="status">Q 1 of </span> <span class="next" id="BtnNext" style="float:right">Next</span><span class="next" id="BtnFinish" visible="false" runat="server" onclick="BtnFinish_Click" style="float:right">Finish</span></div>')// Last span is the finish buttonthe button is the last one in the Span tags when i click this button it says "BtnFinish_Click" is underfined, if someone can help make this button post back to the code behind i would highly appreciate it.
Harrison.Sco...
Member
321 Points
456 Posts
Re: How to show a button when a certain question is shown
Apr 08, 2012 10:08 AM|LINK
Can anyone help me on how i can just say
If Fieldset id = 36 then show the button ??? please help
asteranup
All-Star
30184 Points
4906 Posts
Re: How to show a button when a certain question is shown
Apr 08, 2012 11:20 AM|LINK
Hi,
If you see the documentation of the plugin you can see it accept a function-
onpagechangestart:function(){}This function takes three parameter, first is the container object, second is the index of the field set and third is the current field set. You can use this function for enabling the button.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Harrison.Sco...
Member
321 Points
456 Posts
Re: How to show a button when a certain question is shown
Apr 08, 2012 11:35 AM|LINK
So the container would be the ID right? im not sure what the index is? nor with the current field set?