Hello Guys can anybody help me solve this problem

before its show me in console.log(questionsArray) like this 1. 0:

  1. category: “General Knowledge”
  2. correct_answer: “False”
  3. difficulty: “easy”
  4. incorrect_answers: [“True”]
  5. question: “The Great Wall of China is visible from the moon.”
  6. type: “boolean”

Then I don’t understand why you can’t access the question property with questionsArray[0].question. Can you share your current code again?

let questionsArray = []; // this is a global array that will contain the questions you asked form the mock db function. 
let urlHelper = [];


// this function let the elements in your html to load first.
$(document).ready(function () { 
    // getCategories is a mock DB function that recive 'select' html element, and fill the select with the categories from opentdb.
	// please note that in order to operate the function, in your html there should be a select element that hold the id categories.
	getCategories($("#categories"));
	start();
	
});

async function start(){ 
	// questionsArray is the global array that recive the questions from the mock DB function named getQuestion
	// getQuestion USAGE: returns an array of questions, recives (amount, category , difficulty,type) all of the function parameters should be sent as a string!
	// amount = the number of questions you want to recive
	// category = the category of the questions 9-32
	// difficulty = easy, medium, hard
	// type = multiple , boolean
	// getQuestion is an async function. in order to use it you have to use the keyword await.
	questionsArray =  await getQuestion(5 , 18 , 'easy' ,'boolean');
	console.log(questionsArray);
}



// Mock DB functions you should not edit!

function getCategories(select) {
    $.ajax({
        url: "https://opentdb.com/api_category.php",
        context: document.body
    }).done(function (data) {
        categories = data.trivia_categories;
        for (i in categories) {
            let cat = categories[i];
            let option = "<option value=" + cat.id + ">" + cat.name + "</option>"
            select.append(option);
        }
    });
}
function editUrl(amount, category , difficulty,type){
	urlHelper["amount"]='amount=' + amount;
	urlHelper["category"]='category=' + category;
	urlHelper["difficulty"]='difficulty=' + difficulty;
	urlHelper["type"]='type=' + type;
}
   
async function getQuestion(amount, category , difficulty,type) {
	editUrl(amount, category , difficulty,type);
	var arr= [] ;
    var url = 'https://opentdb.com/api.php?' + urlHelper.amount
            + '&' + urlHelper.category
            + '&' + urlHelper.difficulty
            + '&' + urlHelper.type
			
	var res = await fetch(url);
	var data = await res.json();
	return data.results;
}

can you send me email to here <redacted>
because im new user i must wait in every reply 6hours for next one ^^

to start you could make @discobot tutorial, it should have sent you a message when you joined the forum

Hi! To find out what I can do, say @discobot display help.

I’m not aware of any restriction like that, but I think @ilenia has given the solution to this problem.

Now for the code - when I run your code in my editor, I can console.log the question and related values like this:

async function start() {
    questionsArray = await getQuestion(5, 18, 'easy', 'boolean');
    let questionObject = questionsArray[0];
    let question = questionObject.question;
    let questionType = questionObject.type;
    let correctAnswer = questionObject.correct_answer;
    console.log(question);
}

Not sure why this isn’t working for you. Are you trying to log the questions data outside the start function? Because when the page loads, that questions array is obviously still undefined (it takes a little while until the data is fetched). But you should be able to perform any action on the data inside that start function.

i did same as u ad putted them and tried to console log question i get this error
Uncaught (in promise) TypeError: Cannot read property ‘question’ of undefined
at start

It’s kind of difficult to debug if I can’t reproduce that error… and didn’t you say before that you were able to log the questionsArray?

Have you linked the jQuery script before your own script?

This is the whole code how it’s working for me. If you copy that, do you still get an error?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="myScript.js"></script>
</body>

</html>

JS:

let questionsArray = []; 
let urlHelper = [];

$(document).ready(function() {
    getCategories($("#categories"));
    start();
});

async function start() {
    questionsArray = await getQuestion(5, 18, 'easy', 'boolean');
    let questionObject = questionsArray[0];
    let question = questionObject.question;
    let questionType = questionObject.type;
    let correctAnswer = questionObject.correct_answer;
    console.log(question);
}


function getCategories(select) {
    $.ajax({
        url: "https://opentdb.com/api_category.php",
        context: document.body
    }).done(function(data) {
        categories = data.trivia_categories;
        for (i in categories) {
            let cat = categories[i];
            let option = "<option value=" + cat.id + ">" + cat.name + "</option>"
            select.append(option);
        }
    });
}

function editUrl(amount, category, difficulty, type) {
    urlHelper["amount"] = 'amount=' + amount;
    urlHelper["category"] = 'category=' + category;
    urlHelper["difficulty"] = 'difficulty=' + difficulty;
    urlHelper["type"] = 'type=' + type;
}

async function getQuestion(amount, category, difficulty, type) {
    editUrl(amount, category, difficulty, type);
    var arr = [];
    var url = 'https://opentdb.com/api.php?' + urlHelper.amount +
        '&' + urlHelper.category +
        '&' + urlHelper.difficulty +
        '&' + urlHelper.type

    var res = await fetch(url);
    var data = await res.json();
    return data.results;
}

i’ve copied ur codes and got this error in console log
Script.js:31 Uncaught (in promise) ReferenceError: urlHelper is not defined
at editUrl (Script.js:31)
at getQuestion (Script.js:38)
at start (Script.js:7)
at HTMLDocument. (Script.js:3)
at j (jquery.min.js:2)
at k (jquery.min.js:2)

the game should be like this before and after start the game

can you put your code in repl.it or codesandbox or something like that?

if we can see your project put together and see what’s going wrong it’s easier to help you

here is myfiles inside this rar download it from here https://easyupload.io/ff1pqx
and the game must be look like this before start and after start here is screenShots

please put it on repl.it so people that wants to help you don’t need to set up a local enviroment

1 Like

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<!--Those are imports and defentions you should not edit  -->
	
    <!--  Meta  -->
    <meta charset="UTF-8" />
    <title></title> <!-- You can enter the application title here -->
    
	<!--  Styles  -->
    <link rel="stylesheet" href=""> <!--the reference to your Css should be inserted here -->
    <link rel="stylesheet" href="https://use.fontawesome.com/f24533ba21.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    
	<!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
	<!-- Jquery you should not edit -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
	<!-- JavaScript -->
	 <script type="text/javascript" src=""> </script> <!--the reference to your JavaScript code should be inserted here under src -->
	
</head>

<body>
<!-- The application HTML should appear here. -->






</body>
</html>

JS:

let questionsArray = []; // this is a global array that will contain the questions you asked form the mock db function. 
let urlHelper = [];


// this function let the elements in your html to load first.
$(document).ready(function () { 
    // getCategories is a mock DB function that recive 'select' html element, and fill the select with the categories from opentdb.
	// please note that in order to operate the function, in your html there should be a select element that hold the id categories.
	getCategories($("#categories"));
	start();
	
});

async function start(){ 
	// questionsArray is the global array that recive the questions from the mock DB function named getQuestion
	// getQuestion USAGE: returns an array of questions, recives (amount, category , difficulty,type) all of the function parameters should be sent as a string!
	// amount = the number of questions you want to recive
	// category = the category of the questions 9-32
	// difficulty = easy, medium, hard
	// type = multiple , boolean
	// getQuestion is an async function. in order to use it you have to use the keyword await.
	questionsArray =  await getQuestion(5 , 18 , 'easy' ,'boolean');
	console.log(questionsArray);
}



// Mock DB functions you should not edit!

function getCategories(select) {
    $.ajax({
        url: "https://opentdb.com/api_category.php",
        context: document.body
    }).done(function (data) {
        categories = data.trivia_categories;
        for (i in categories) {
            let cat = categories[i];
            let option = "<option value=" + cat.id + ">" + cat.name + "</option>"
            select.append(option);
        }
    });
}
function editUrl(amount, category , difficulty,type){
	urlHelper["amount"]='amount=' + amount;
	urlHelper["category"]='category=' + category;
	urlHelper["difficulty"]='difficulty=' + difficulty;
	urlHelper["type"]='type=' + type;
}
   
async function getQuestion(amount, category , difficulty,type) {
	editUrl(amount, category , difficulty,type);
	var arr= [] ;
    var url = 'https://opentdb.com/api.php?' + urlHelper.amount
            + '&' + urlHelper.category
            + '&' + urlHelper.difficulty
            + '&' + urlHelper.type
			
	var res = await fetch(url);
	var data = await res.json();
	return data.results;
}

Ok, sorry, I can’t help you

sry didnt saw that u wrote to put it on repl.it
here is the link ive putted code there
https://CloseRedPacket.loaysabag.repl.co

On my end, I can’t see anything when I click on the link. It is just a blank white page for me.

Repl.it - CloseRedPacket

1 Like

i dont know how to share the code in repl.it i copied my code to there and sent the link

We can see it now.
It works.