CODEWITHSUNDEEP
javascripthtmljson
HattrickNZ
HattrickNZ

Reputation: 4653

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

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).

Upvotes: 1

Views: 8068

Answers (3)

ep0
ep0

Reputation: 710

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();

Upvotes: 1

coonooo
coonooo

Reputation: 205

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.

Upvotes: 1

meborda
meborda

Reputation: 391

you may use jquery ajax.

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

Upvotes: 0

Related Questions