Quiz Encryption

And AJAX question

Page 1 of 1

14 Replies - 1436 Views - Last Post: 27 July 2009 - 12:23 PM

#1 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Quiz Encryption

Post icon  Posted 18 July 2009 - 03:00 PM

After much drama and debate, I decided to nix the idea about creating a quiz in Flash (which I know nothing about) and just go ahead and do it with javascript and html. I have it all worked out correctly. I have 5 questions on the page with the logic with answers in an external js file. I will add some cookies later so that the user doesnt have to take the quiz every time they visit, but I have have a question about encryption. I know the average user probably wouldn't think to dig into the source or even hunt for the external javascript to try to find the answers (not that it would matter, the quiz is not for school or anything), but I would still like to keep the answers hidden nonetheless. What is the best way to go about it?

Second question, for now, I have all the questions on the one page. How can I get it so that I can have one question displayed at a time and the answers get stored somehow until the function to score is called. I already figured out that I can't just have it just plain old JS and HTML, it didn't work for me. But I am sure there is a way to do it with AJAX right? Or is there a method in js for storing the answers then callilng them back to score (without putting it on the users file system of course) at the end.

Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: Quiz Encryption

#2 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 18 July 2009 - 11:11 PM

Maybe it would be more conducive to recieving help if I posted my code.

Here is the HTML
<html>
	<head>
		<script src="quiz.js"></script>

		<title>Quiz Demo</title>
		
	</head>

	<body>
		<table width="300" border="3" bgcolor="maroon">
			<tr>
				<td style="color:gold">
					<p>Which one is not a fruit?</p>
					<input type="radio" name="1" value="a" id="a" onclick="scoreSys(1, this.value)"/>
					<label for="a">Apples</label><br />
					<input type="radio" name="1" value="b" id="b" onclick="scoreSys(1, this.value)" />
					<label for="b">Oranges</label><br />
					<input type="radio" name="1" value="c" id="c" onclick="scoreSys(1, this.value)" />
					<label for="c">Tomatoes</label><br />
					<input type="radio" name="1" value="d" id="d" onclick="scoreSys(1, this.value)" />
					<label for="d">Bananas</label><br />
					<p />
					<p>Which one is not a fruit?</p>
					<input type="radio" name="2" value="a" id="a" onclick="scoreSys(2, this.value)"/>
					<label for="a">Apples</label><br />
					<input type="radio" name="2" value="b" id="b" onclick="scoreSys(2, this.value)" />
					<label for="b">Oranges</label><br />
					<input type="radio" name="2" value="c" id="c" onclick="scoreSys(2, this.value)" />
					<label for="c">Tomatoes</label><br />
					<input type="radio" name="2" value="d" id="d" onclick="scoreSys(2, this.value)" />
					<label for="d">Bananas</label><br />
					<p />
					<p>Which one is not a fruit?</p>
					<input type="radio" name="3" value="a" id="a" onclick="scoreSys(3, this.value)"/>
					<label for="a">Apples</label><br />
					<input type="radio" name="3" value="b" id="b" onclick="scoreSys(3, this.value)" />
					<label for="b">Oranges</label><br />
					<input type="radio" name="3" value="c" id="c" onclick="scoreSys(3, this.value)" />
					<label for="c">Tomatoes</label><br />
					<input type="radio" name="3" value="d" id="d" onclick="scoreSys(3, this.value)" />
					<label for="d">Bananas</label><br />
					<p />
					<p>Which one is not a fruit?</p>
					<input type="radio" name="4" value="a" id="a" onclick="scoreSys(4, this.value)"/>
					<label for="a">Apples</label><br />
					<input type="radio" name="4" value="b" id="b" onclick="scoreSys(4, this.value)" />
					<label for="b">Oranges</label><br />
					<input type="radio" name="4" value="c" id="c" onclick="scoreSys(4, this.value)" />
					<label for="c">Tomatoes</label><br />
					<input type="radio" name="4" value="d" id="d" onclick="scoreSys(4, this.value)" />
					<label for="d">Bananas</label><br />
					<p />
					<p>Which one is not a fruit?</p>
					<input type="radio" name="5" value="a" id="a" onclick="scoreSys(5, this.value)"/>
					<label for="a">Apples</label><br />
					<input type="radio" name="5" value="b" id="b" onclick="scoreSys(5, this.value)" />
					<label for="b">Oranges</label><br />
					<input type="radio" name="5" value="c" id="c" onclick="scoreSys(5, this.value)" />
					<label for="c">Tomatoes</label><br />
					<input type="radio" name="5" value="d" id="d" onclick="scoreSys(5, this.value)" />
					<label for="d">Bananas</label><br />
					<p />
					<p>Did you pass?
					   <br /> <br /> If you passed, the score button will allow you to place the
					item you were looking at into your cart. Good Luck!
					</p>
					<br />
					
					<input type=button onclick="Score()" value="Score Me">
				</td>
			</tr>

		</table>
	</body>
</html>


And this is the called java script:
var ans = new Array;		//Setting the correct answer variable
var yourAns = new Array;	//Setting the users answer variable

var score = 0;   // all the correct answer to the questions in the HTML
ans[1] = "c";
ans[2] = "c";
ans[3] = "c";
ans[4] = "c";
ans[5] = "c";

// Scoring system to compare the input answer to the real answer
function scoreSys(question, answer) {
	yourAns[question]=answer;
}

// Funciton to tally the score and lead to pass or fail pages
function Score(){
	var totalScore = 0;
	for(i=1;i<=5;i++){
		totalScore = totalScore + i;
		if(ans[i]!= yourAns[i]){
			totalScore = totalScore + ans[i];
		}
		else{
			totalScore = totalScore;
			score++;
		}
	}

	if(score<4){
		window.location.href="study.html";
	}

	if(score>4){
		window.location.href="youpassed.html";

	}
}


So what I am trying to learn now is actually three things come to think of it. #1 most important thing is how do I encrypt the html or js files so that users can't "cheat"?
Second, is there a way to use maybe AJAX or similar language so that I don't need all the questions on the same page. I think it would look better if it was one question at a time, but I am still just learning how to do basic Javascript.

Now I am also thinking of adding a cookie element to this. I have done the cookie tutorials that are on the w3schools site for js, but I didn't find it very helpful. How would I set a cookie saying that the user has taken the quiz and passed it, that way when he goes to that page, it will automatically redirect to the "passed.html" page.
Was This Post Helpful? 0
  • +
  • -

#3 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Re: Quiz Encryption

Posted 20 July 2009 - 12:51 PM

Encrypting will be harder. If you have experience in databases, I suggest using MySql and JS to hash the answers. However, I don't think encryption is nesaccary. If a user can rummage through your source, they can pass a quick quiz.
@cookies:
I would use the first two functions at http://www.w3schools.../js_cookies.asp to work with your cookies. Try writing a function that checks the cookie name.
@encryption again:
If you want a little more security, try creating a form that changes each time. You could store multiple questions in a array. Or set the order with a random number. You might want to change your cookie name often too.

Tip:
make sure your cookie expires before the user goes back to checkout. This will keep them from only taking the test once. I would set the cookie to last about 24 hrs.
Was This Post Helpful? 1
  • +
  • -

#4 KuroTsuto  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Quiz Encryption

Posted 20 July 2009 - 04:41 PM

If you're using AJAX, anyway, couldn't you just send the user's answer to a server script to validate the answer and keep track of right/wrong answers in a session? Wouldn't matter if they read the javascript or html, then. They could throw any answer they wanted at the server and it wouldn't change anything.

But if you're still determined to keep the peeps from reading your javascript, take a look at obscurity (sorry, no link). It typically makes javascript files smaller than if you were to minify them, with the added benefit that hard as hell to read/interpret for anyone looking at the source.

No comment on the cookie jazz for now.

Cheers,
~KuroTsuto
Was This Post Helpful? 0
  • +
  • -

#5 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 20 July 2009 - 09:36 PM

I'm not using AJAX, I would like to though. I am still trying to learn it though (via AJAX for Dummies). I was hoping someone could point me in a better direction here. As for the security, thanks on that. I did a search for javascript obscurity and found a site that had a list of "Obfuscators" for encrypting JS. I found a good one called Free JS Obfuscator that works well. Look at what it did to my provided code.

var _0x67ca=["\x63","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x73\x74\x75\x64\x79\x2E\x68\x74\x6D\x6C","\x79\x6F\x75\x70\x61\x73\x73\x65\x64\x2E\x68\x74\x6D\x6C"];var ans= new Array;var yourAns= new Array;var score=0;ans[1]=_0x67ca[0];ans[2]=_0x67ca[0];ans[3]=_0x67ca[0];ans[4]=_0x67ca[0];ans[5]=_0x67ca[0];function scoreSys(_0x5c83x5,_0x5c83x6){yourAns[_0x5c83x5]=_0x5c83x6;};function Score(){var _0x5c83x8=0;for(i=1;i<=5;i++){_0x5c83x8=_0x5c83x8+i;if(ans[i]!=yourAns[i]){_0x5c83x8=_0x5c83x8+ans[i];} else {_0x5c83x8=_0x5c83x8;score++;};};if(score<4){window[_0x67ca[2]][_0x67ca[1]]=_0x67ca[3];};if(score>4){window[_0x67ca[2]][_0x67ca[1]]=_0x67ca[4];};};



View PostKuroTsuto, on 20 Jul, 2009 - 03:41 PM, said:

If you're using AJAX, anyway, couldn't you just send the user's answer to a server script to validate the answer and keep track of right/wrong answers in a session? Wouldn't matter if they read the javascript or html, then. They could throw any answer they wanted at the server and it wouldn't change anything.

But if you're still determined to keep the peeps from reading your javascript, take a look at obscurity (sorry, no link). It typically makes javascript files smaller than if you were to minify them, with the added benefit that hard as hell to read/interpret for anyone looking at the source.

No comment on the cookie jazz for now.

Cheers,
~KuroTsuto

Was This Post Helpful? 0
  • +
  • -

#6 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 20 July 2009 - 11:26 PM

My 5 question quiz took me all day. I am still learning JS so bear with me. I went through w3c's entire js section working through all the code in my own editor, experimenting a little (built my own browser detector/redirect script even), but I still don't know it all. I get the syntax for the most part on this cookie script, but I am unsure on how to modify it for my needs. How would I have it set for 24 hours when the example I see has it set to days, not hours.

I do eventually want to implement random questions, not for security but to keep from having the same questions everyday, but I don't know how to proceed. Thats what I get for self teaching I guess. :)

View Postkewlkreator, on 20 Jul, 2009 - 11:51 AM, said:

Encrypting will be harder. If you have experience in databases, I suggest using MySql and JS to hash the answers. However, I don't think encryption is nesaccary. If a user can rummage through your source, they can pass a quick quiz.
@cookies:
I would use the first two functions at http://www.w3schools.../js_cookies.asp to work with your cookies. Try writing a function that checks the cookie name.
@encryption again:
If you want a little more security, try creating a form that changes each time. You could store multiple questions in a array. Or set the order with a random number. You might want to change your cookie name often too.

Tip:
make sure your cookie expires before the user goes back to checkout. This will keep them from only taking the test once. I would set the cookie to last about 24 hrs.

Was This Post Helpful? 0
  • +
  • -

#7 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 21 July 2009 - 12:02 AM

I have revised my code to add cookies, but it doesnt seem to be working properly. When I go to the quiz.html for the first time, I get an alert that says welcome to the quiz blah blah blah. I then take the test and pass, and scoring brings me to the passed.html. However, when I go back to quiz.html, the cookie is supposed to see that I have passed and then go onto secretstore.html, but it doesnt. What am I doing wrong here?

var ans = new Array; //Setting the correct answer variable
var yourAns = new Array; //Setting the users answer variable
var score = 0; // all the correct answer to the questions in the HTML
ans[1] = "c";
ans[2] = "c";
ans[3] = "c";
ans[4] = "c";
ans[5] = "c";

// Scoring system to compare the input answer to the real answer
function scoreSys(question, answer){
	yourAns[question] = answer;
}

// Funciton to tally the score and lead to pass or fail pages
function Score(){
	var totalScore = 0;
	for (i = 1; i <= 5; i++) {
		totalScore = totalScore + i;
		if (ans[i] != yourAns[i]) {
			totalScore = totalScore + ans[i];
		}
		else {
			totalScore = totalScore;
			score++;
		}
	}
	
	if (score <= 4) {
		window.location.href = "study.html";
	}
	
	if (score == 5) {
		window.location.href = "youpassed.html";
		
	}
}

function setCookie(c_name, value, expiredays){
	var exdate = new Date();
	exdate.setDate(exdate.getDate() + expiredays);
	document.cookie = c_name + "=" + escape(value) +
	((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}

function getCookie(c_name){
	if (document.cookie.length > 0) {
		c_start = document.cookie.indexOf(c_name + "=");
		if (c_start != -1) {
			c_start = c_start + c_name.length + 1;
			c_end = document.cookie.indexOf(";", c_start);
			if (c_end == -1) 
				c_end = document.cookie.length;
			return unescape(document.cookie.substring(c_start, c_end));
		}
	}
	return "";
}

function checkCookie(){
	checkScore = getCookie('passed');
	if (score <= 4 ) {
		alert('Welcome to the quiz! You must pass this quiz before adding the item to your cart.');
	}
	else {
		window.location.href = "secretstore.html";
	}
	
	if (score != null && score == 5) {
		setCookie('passed', checkScore, 7);
	}
	
}


Was This Post Helpful? 0
  • +
  • -

#8 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Re: Quiz Encryption

Posted 21 July 2009 - 05:47 AM

Hrm... This will be tricky (I'm a n00b too). Let me get back to you... Hrm... Hrm...
Was This Post Helpful? 0
  • +
  • -

#9 KuroTsuto  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Quiz Encryption

Posted 21 July 2009 - 08:26 AM

If you're just beginning with javascript, I highly recommend picking up a javascript framework to get you started. While the code will execute slightly more lengthily than straight up javascript (nearly imperceptibly so, in most scenarios), it will make coding such functionality a hell of a lot easier. For you, I might recommend jQuery... I believe it is the fastest of the frameworks to learn (you could probably have the basic syntax down in an hour or less). It also has an extremely vast number of third-party-plugins so you can make it do essentially anything you need it to.

Additional frameworks include Prototype, Dojo, and YUI to name a few....

As for working with cookies, the first thing I would like to inquire about is if you are working from some sort of development environment? I strongly recommend using Firefox with the Firebug and Firecookie extensions (at the least). This will allow you to view changes in cookies as well as debug faulty javascript. These tools make client-side development (even some server-side dev now, too with such plugins as FirePHP) a snap.

As for AJAX and the like... Are you familiar with PHP? The cookie you're setting could be an MD5 hash of the end user's username or some combination of their system information. That might be a little overboard, though, considering the situation. I wouldn't be too concerned about cookie security, though.

I was about to throw down some pseudocode for an AJAX solution, but screw that for now ;). To answer your most recent question, you should snag Firebug and Firecookie to figure out where your cookies are getting messed over - are they not getting set, or are they not getting read?

This post has been edited by KuroTsuto: 21 July 2009 - 08:27 AM

Was This Post Helpful? 0
  • +
  • -

#10 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 21 July 2009 - 10:27 AM

Thanks for the tips. I just downloaded firecookie, so I will check that out. It looks like the cookie is getting set, just not read, but hopefully fc will help me. I am looking at the jquery docs right now and it looks simple, but there doesnt seem to be much about installation. I see some files in my usr/share/javascript/jquery folder for jquery.js etc. I downloaded the most recent one and replaced that with the old one in that folder. I assume that is okay to do. The doc say something about using MAKE? What is that?

From what I can gather so far in the docs, to start using jQuery in my page i just have to have the jq.js file in my directory and reference it right? Now when you ask if I am working in a dev enviro, are you asking if I am using an IDE or studio? Well, I was using NetBeans (I develop Java) but I have found recently a program called Aptana that I am in love with for building web sites/apps. Is that what you are talking about?

View PostKuroTsuto, on 21 Jul, 2009 - 07:26 AM, said:

If you're just beginning with javascript, I highly recommend picking up a javascript framework to get you started. While the code will execute slightly more lengthily than straight up javascript (nearly imperceptibly so, in most scenarios), it will make coding such functionality a hell of a lot easier. For you, I might recommend jQuery... I believe it is the fastest of the frameworks to learn (you could probably have the basic syntax down in an hour or less). It also has an extremely vast number of third-party-plugins so you can make it do essentially anything you need it to.

Additional frameworks include Prototype, Dojo, and YUI to name a few....

As for working with cookies, the first thing I would like to inquire about is if you are working from some sort of development environment? I strongly recommend using Firefox with the Firebug and Firecookie extensions (at the least). This will allow you to view changes in cookies as well as debug faulty javascript. These tools make client-side development (even some server-side dev now, too with such plugins as FirePHP) a snap.

As for AJAX and the like... Are you familiar with PHP? The cookie you're setting could be an MD5 hash of the end user's username or some combination of their system information. That might be a little overboard, though, considering the situation. I wouldn't be too concerned about cookie security, though.

I was about to throw down some pseudocode for an AJAX solution, but screw that for now ;). To answer your most recent question, you should snag Firebug and Firecookie to figure out where your cookies are getting messed over - are they not getting set, or are they not getting read?

Was This Post Helpful? 0
  • +
  • -

#11 KuroTsuto  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Quiz Encryption

Posted 21 July 2009 - 11:58 AM

Noice! Firebugs and Flaming cookies... delicious ;). In regards to your dev environment, I was really just talking about having some debugging tools in your browser, but I was a little vague there.

"Installing" jQuery is really that simple. You just place the .js file in your site directory somewhere and reference it with a <script> tag, then place all of your jQuery code
<script type="text/javascript">
$(document).ready(function() {
//Right here
});
</script>



Don't worry about MAKE or anything of the sort - that's if you want to get in on the nightly builds and production of jQuery, or want the latest source of jQuery to mess around with. Pretty much don't need to worry about that.

Of course, if you think you may complete your task using straight-up javascript, then by all means do so. Learning and incorporating jQuery this time may take a little longer, but it's time well spent and will allow you some fast client-side dev in the future.

If you're serious about jQuery and AJAX, you're probably going to be looking at jQuery's load function.
$('#divid').load('ajax/quiz.php',{'qid':'1423','step':'3','ans':'Yes'},
	function() {
		alert('BOO!');
	});


In that little example there, it will send a request to the quiz.php script in the ajax directory with the variables qid, step, and ans. Whatever the server sends back will be placed into the element with an ID of 'divid', and once the reponse has been received, the browser will throw a dialog that says "BOO!". This is basically what the load function does... it loads the server response into an element. But I'm a pretty poor replacement for the official documentation ;).

So, theoretically, you could make a function that loads content into a main <div> element and call it once on page load to get and display the first question, then call it every time the user hits a 'submit' button on the page to submit each subsequent answer and retrieve the next question.
Was This Post Helpful? 0
  • +
  • -

#12 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Re: Quiz Encryption

Posted 21 July 2009 - 03:20 PM

Please show the URL when your done! :)
Was This Post Helpful? 0
  • +
  • -

#13 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 21 July 2009 - 08:57 PM

Quote

If you're serious about jQuery and AJAX, you're probably going to be looking at jQuery's load function.
$('#divid').load('ajax/quiz.php',{'qid':'1423','step':'3','ans':'Yes'},
	function() {
		alert('BOO!');
	});



You lost me on that one. I actually looked more into jq and jq's ui files and used a template to build a slick accordion style quiz. I still would rather have it to where one question appears at a time and each answer writes to a file, then on the final question when Submit is hit, the function reads all those complied scores. All I have figured out how to do so far is to have everything on the one page. That is why I was looking at ajax because I know it has the function to write to files and what not. Do you know of a good primer for that or how I could use something like that in my code?

BTW, I have what I've done uploaded to my domain now if you guess want to see where i am at. http://webdesignsbya...jra/jqtest.html
Was This Post Helpful? 0
  • +
  • -

#14 KuroTsuto  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Quiz Encryption

Posted 23 July 2009 - 08:06 AM

Sorry for the confusion... I got excited ;). Pardon the late reply, as well!

If I were working on this project, I think the flow I would throw down would be something like this:
//Server side
Connect to database, retrieve question set for the product/category that the user is interested in.
Display ALL questions, each question in a separate <div>; each <div> belonging to the same class.

//Client side
Hide all divs except for the first question.
When the user answers a question, delay approximately two seconds then display the second q and hide the first, provide a "back" button to return to the last question (without reloading the page).
When all questions have been answered, display a "Submit" button.
On submit, send a request to the server containing all of the user's answers.

//Server side
Connect to the database, retrieve the correct answerset for the product/category.
Validate the user's answers against those in the database.
Either respond with a message informing them that they jacked up or a message/header redirect
that will add the product to their cart and set a quiz cookie.



Just trying to get on the same page, here - is that what you're looking at? I definitely think server-side validation would be the way to go, here, as then the user cannot really tamper with the quiz. Whether you use AJAX or not in this situation is really conditional: Do you plan on displaying the quiz on the same page as the product, or do you plan on opening the quiz in a new window/tab, or do you simply plan on taking the user (in their current window/tab) to the quiz when they try and snag a product?

Now we're getting into it ;). If you are still wanting to go with javascript through-and-through (throwing out server-side validation), I stumbled across this cookie plug-in for jQuery that make reading and writing cookies a snap.

If my flow above isn't really what you had in mind, tell me a little about yours, if you will ;)
Was This Post Helpful? 0
  • +
  • -

#15 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Re: Quiz Encryption

Posted 27 July 2009 - 12:23 PM

I think all that is a bit beyond my understanding right now. I'm not quite there yet. I will check out that jQuery cookie plugin though. That looks interesting.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1