How to compare 2 arrays containing strings?

[ichbinali]

What I’m trying to achieve here is that, the user’s answers will be compared with the questions’ answers. It’s a quiz, basically.
I’ve tried using for loops to loop over the arrays and compare whether they’ve the same answers(in strings of course), to no avail. Obviously because of my lack of knowledge.

This is the JS code.

        var questAnswers = ["A", "Bb"];
	//Above - questions' answers. | | | | Below - user's answers.
	var userAnswers = []
	
	$("#q1choices div").click(function() {
		$("#q1choices div").not(this).css("background-color", "dodgerblue").unbind("click");
		$(this).css("background-color", "#ff3333");
		userAnswers.push($(this).text());
	});
	
	$("#q2choices div").click(function() {
		$("#q2choices div").not(this).css("background-color", "dodgerblue").unbind("click");
		$(this).css("background-color", "#ff3333");
		userAnswers.push($(this).text());
	});

HTML code:

<section class="quest container">
	<div class="row text-center">
		<h1 id="text">Question 1</h1>
	</div>
	<hr id="ravenline">
	<div class="row text-center">
		<p>Aa or A?</p>
	</div>
	
	<div id="q1choices" class="row text-center choiceholder">
		<div class="col-sm-6">
			<h2>Aa</h2>
		</div>
		<div class="col-sm-6">
			<h2>A</h2>
		</div>
	</div>
</section>

<section class="quest container">
	<div class="row text-center">
		<h1 id="text">Question 2</h1>
	</div>
	<hr id="ravenline">
	<div class="row text-center">
		<p>Bb or B?</p>
	</div>
	
	<div id="q2choices" class="row text-center choiceholder">
		<div class="col-sm-6">
			<h2>Bb</h2>
		</div>
		<div class="col-sm-6">
			<h2>B</h2>
		</div>
	</div>
</section>

<section class="quest container">
	<div class="row text-center">
		<h1 id="score"></h1>
	</div>
</section>

I also noticed that, when I(playing as user) click on the div that contains 2 choices, no matter which answer, the text of the answer will have a space before a comma. Like this:

abcd , efgh

Notice the space between the “abcd” and the comma?

Thanks for reading.

[Dormilich]

@ichbinali

Notice the space between the “abcd” and the comma?

you never trim the spaces off your data …

[Andres_Vaquero]

If you are just trying to check if they are the same maybe something like this will work for you?

if(JSON.stringify(questAnswers)==JSON.stringify(userAnswers)) {
// do stuff
}

[ichbinali]

I didn’t yeah. I tried countless of times of ways to remove the unnecessary white-spaces.
Took a break throughout the weekend, got back into figuring it out just now.

I figured out why there were spaces. I written my jQuery code to do something when someone clicks on a DIV, the parent element of the h2 element. Thus giving unnecessary spaces to the h2 elements.
So what I did was, I changed it to do something when someone clicks on the h2 element instead, and change the amount of space the h2 element covers in the DIV. Voila.

So lads and gals, if you happen to be as frustrated as I was, and if you happen to have a similar bug, that might help you.

And thanks for the help Dormilich.

[ichbinali]

I figured it out with little-to-no help. Thanks anyway, looked up about that JSON.stringify, might come in handy deeper in my little project.