Jump to content

How do I adapt this quiz-answering script to this new quiz layout?


anti91

Recommended Posts

I want the browser to be able to select correct answers to questions. I found an answer that seems to be the right idea (How can I automatically select specific radio buttons with Greasemonkey?) but I don't know enough javascript to use it.My HTML code is shown in but i can't adapt it like as followsjsfiddle.n e t/66Lam/Ex: it's working here, but i can't adapt it my code.jsfiddle.n e t/kDThC/8/Can you adapt it for me Please ? THANKS GUYS

Link to comment
Share on other sites

The Javascript code is specific to the HTML structure. You can't change the HTML structure and have the same Javascript code work. In the original code it uses this to get the question text elements: var questionTxt = $("div div.vito_form_title_min span[id$=Soru]"); That selector matches this structure:

<div class="vito_form_q">       <div class="vito_form_title_min_no">            <span id="ContentPlaceHolder1_lblSoruNo">1</span></div>        <div class="vito_form_title_min">            <span id="ContentPlaceHolder1_lblSoru">What is that?</span></div>

The selector is looking for a span with an ID that ends in "Soru", which is inside a div with the class "vito_form_title_min", which is inside another div. Your HTML code does not have that structure, so it's not going to find the question text. Then it uses this to get the different answers: $(this).parent (). nextAll ("div.quest").find ("label"); That tells it to start in the parent of the question text span, and go through children looking for a div with a class of "quest", and then find label elements as children to that element. Again, your HTML doesn't match that structure, you don't have label elements around the answers for example. The code to automatically check a radio button also depends on the IDs and labels being set up a certain way. So, there are several things to change in that code. If you want to understand how that code works then you need to understand how it uses the HTML structure that it works on, so that you know which parts of the code you need to change if you're going to change the structure. You already need to change the 2 lines I listed, where it looks like for the questions and answers, and also the code to find the ID of the correct answer and select the appropriate button. How much experience do you have? Do you understand the selectors that it uses to get the elements?

Link to comment
Share on other sites

Thanks your reply, I am beginner javascript about. I found that code anywhere forum and I need adapt it in my HTLM codes. I tried change it ,but i can't adapt code in my Htlm. :SMeanwhile what is your advise learn javasciprt to edit these type codes for me?Can you do it for me ? a lot of Thanks jsfiddle.n e t/66Lam/ this is my htlm codes:

<div id="soruareain"  class="soruareainimagesiz" >	<div id="sorunodiv">		<div id="soruno">			1		</div>	</div>	<div id="soruveseceneklerdiv">		<div id="sorunediv">			<div id="sorune">				Which sport is playing with ball ?			</div>		</div>		<div id="soruseceneklerdiv">			<div id="sorusecenekler">								<div id="cevap1"					class="dcevap  cevaplaraltalta ">										<input type="radio" name="cevapr" id="cevapr1"						value="1" class="rcevap" /> <span class="lcevap"						onclick="sec(1);">athletics </span>				</div>								<div id="cevap2"					class="dcevap  cevaplaraltalta ">										<input type="radio" name="cevapr" id="cevapr2"						value="2" class="rcevap" /> <span class="lcevap"						onclick="sec(2);">swimming </span>				</div>								<div id="cevap3"					class="dcevap  cevaplaraltalta ">										<input type="radio" name="cevapr" id="cevapr3"						value="3" class="rcevap" /> <span class="lcevap"						onclick="sec(3);">fencing </span>				</div>								<div id="cevap4"					class="dcevap  cevaplaraltalta ">										<input type="radio" name="cevapr" id="cevapr4"						value="4" class="rcevap" /> <span class="lcevap"						onclick="sec(4);">Football </span>				</div>								<div style="display: none;">					<input type="hidden" name="cevapadet" id="cevapadet"						value="4" />				</div>			</div>		</div>	</div>  

so I changed it but it's not work.

var questionTxt = $("div [id$='sorune']");questionTxt.each ( function () {    var bFoundAnswer    = false;    var answerTxt       = getAnswer (this.textContent);    if (answerTxt) {        //--- We have the answer text, now find the matching radio button and select it.        var ansForThisQ     = $(this).parent (). nextAll ("div.sorusecenekler").find ("span");

What is my problem ?

Edited by anti91
Link to comment
Share on other sites

You should be using your browser's developer tools to help you with this. There are links in my signature that describe them, if you're using Chrome you can open the developer tools with Ctrl-Shift-I. Once you do that then you can send the various things you're using in your code to the developer console to see what they are. After that first line you showed, you can use console.log(questionTxt) to send the questionTxt variable to the developer console so that you check if it's the right element. You should also use console.log with answerTxt and ansForThisQ to check if they are set to the right things, the point is to be able to verify that the code is working correctly.

Link to comment
Share on other sites

One problem is that you have it set to use Mootools instead of jQuery, and the other problem is that you're telling it to look for a div with a class of "sorune", but no div has that class. There is a div with that ID, but it should be a class instead of an ID.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...