how to read a external JSON file into my html/javascript quiz

Question

I am slowly learning JavaScript and am working to build a quiz.

So I have got a very basic quiz see here

So my specific questiions are

1. How would I store the Questions and answers in an external JSON file?
2. Can I store the Questions and answers in another file type for instance a CSV file?

Maybe I should have a function that goes and gets the Qs&As for me:

function getQuestions() {
}

A working example where possible would be greatly appreciated.

Other thoughts: I know the Javascript/HTML quiz could be written alot better here, that is what I am working towards. I know it could be presented alot better using CSS (currently looking at bootstrap).

• s_curry_s: do you want to use a database? I recommend mongodb or couchdb.. because their data structure is very similar to JSON
• shibbybird: If you are just trying to create a simple quiz that could easily be figured out by debugging then its easy and I would gladly paste some helpful code. But if you are creating a web service. Then I don't think anyone is going to paste code here for you because the web service could be written in 1000's of different ways with many different script/programming languages. BTW I didn't down vote you just stating possibly why there is a down vote.
• ep0: If he is currently learning JavaScript, I doubt he will be able to handle MongoDB or CouchDB now.
• Paul: d3.js can handle CSV files and embedding extra data into HTML elements , where you could hide the "answers" and check them from javascript. d3 also allows learning graphics. The O'Reilley book by Scott Murray, Interactive Data Visualization, provides a gentle introduction to this d3 javascript library and actually starts with text/table examples.
• HattrickNZ: tks for all the comments

Answer 1

you can insert a script tag in head like:

<script type="text/json" src="some.cvs" />

web browser cant recognize those script tag,so do not download those files.

use jquery or something find those tag's src attribute.use ajax load those file and parse to json data:

var eles=$("script[type='text/json']").each(function(){
 var cvsurl=$(this).attr("src");
 $.ajax({
 dataType: "json",
 url: ,
 data: data,
 success: function(result){ 
 //handling of your json data
 }
 });
})

I just give the method.

Answer 2

Use getJson to load your file and handle data.

In the success function you will have a JSON object.

As for storing data in a CSV file: yes you can, but you would have to parse it

Edit: This approach requires jQuery.

For pure Javascript:

• make an AJAX call to get the contents of the file
• JSON.parse() the response.

For making that AJAX call, you should also get familiar with a server-side scripting language.

In php (let's say getQuiz.php):

<?php
 $data = file_get_contents ('quiz');
 echo json_encode($data);
?>

So make a GET request to getQuiz.php and the response will be contents of file quiz encoded as JSON

var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState==4 && xmlhttp.status==200) {
 // Here you have your response
 quiz_data = JSON.parse(xmlhttp.responseText);
 // Other code
 }
}
xmlhttp.open("GET","getQuiz.php",true);
xmlhttp.send();

• acjay: You should definitely clarify that this depends on using jQuery.
• John Dvorak: "eval() the response." -- don't!!! Even if eval is only a fallback for when JSON.parse is not available, you should do some pre-check before doing eval (eval also kills performance, but who cares about IE7 speed, right?)
• ep0: I wrote eval(), but used JSON.parse() :). You are right. Don't use eval()

Answer 3

you may use jquery ajax.

$.ajax({
 dataType: "json",
 url: [location of your json file],
 data: data,
 success: 
 function(result){ 
 //handling of your json data
 }
});