Hi, what’s your question?
i want to make questions and type and and diffeculty showen in page
not only in console
if you can come zoom i’ll be so gratefully
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding 
I don’t know “zoom” but anyway, have you already written some code? It’s difficult to work with a screenshot.
Have you already some knowledge in JavaScript?
Where are the questions and answers coming from, where are they stored?
it’s really not possible to debug from a screenshot, please post your code or even better a live version of your project, like on repl.it
<!DOCTYPE html>
<html lang="en">
<head>
<!--Those are imports and defentions you should not edit -->
<!-- Meta -->
<meta charset="UTF-8" />
<title>Questions&Answers!</title> <!-- You can enter the application title here -->
<!-- Styles -->
<link rel="stylesheet" href="Style.css"> <!--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.js"> </script> <!--the reference to your JavaScript code should be inserted here under src -->
</head>
<body>
<form action="" method="post" class="form-api">
<h2 class="form-signin-heading">Loay Sabag ID:201126232 <(^_~)></h2>
<br>
<label for="category">Select Category: </label>
<select name="category" id="categories" class="categories"></select>
<br>
<label for="difficulty">Select Difficulty: </label>
<select name="difficulty" id= "difficulty" class="difficulty">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<br>
<label for="type">Select Type: </label>
<select name="type" id="type" class="type">>
<option value="multiple">Multiple Choice</option>
<option value="boolean">True / False</option>
</select>
<br>
<label for="type">Questions: </label>
<select id="question" value="questionsArray" class="question ">
</select>
</p>
<div class="answers">
<option value="correct_Answer">correct_Answer</option>
<option value="incorrect_Answer">incorrect_Answer</option>
</div>
<br>
</div>
<label for="_amount">Number of Questions:</label>
<input type="number" name="amount" id="amount" class="amount" min="1" max="50" value="10">
<br>
<button onclick="start()">Start Game</button>
<h4> Score: <span id="score">0</span></h4>
</form>
</div>
<p>---------------------------------------------------------------------</p>
<h1>Loay HomeWorks <(^_~)></h1>
<p>---------------------------------------------------------------------</p>
<details>
<summary>©Copyright 2019-2020.</summary>
<p> - by Programmer Loay. All Rights Reserved.</p>
<p> - All content and graphics on this web site are the property of the company Loay.</p>
</details>
</body>
</html>
Your HTML alone doesn’t help much. do you already have something inside your Script.js ?
If shared a live version on like codepen, or repl.it people would be able to assist you better. You have two great developers here that want to help you but you have to give them all of the information to work with.
Hope that helps!
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(amount,category,difficulty,type);
// getQuestion USAGE: returns an array of questions, recives (amount, category , difficulty,type) all of the function parameters should be sent as a string!
// amount = 50;//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(amount , category , difficulty ,type);
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;
}
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
thanks for this info i’ve edited my posted
I’m assuming you want this function to actually write something on the page instead of just logging the data?
async function start(){
questionsArray = await getQuestion(amount , category , difficulty ,type);
console.log(questionsArray);
}
Your questions are an array of objects, as it seems. Each question object holds all the data relevant to that question (the question itsself, a number of false answers, the right answer, etc).
You can access all that data with (for example)
let questionObject = questionsArray[0];
let question = questionObject.question;
let questionType = questionObject.type;
let correctAnswer = questionObject.correct_answer;
...
Then if you want to display any of that on the page (with jQuery), you’d do (for example):
$('.answers option[value="correct_answer"]').text = correctAnswer;
Does that help?
still not tell me is there any thing missing in my index.html and those codes
let questionObject = questionsArray[0];
let question = questionObject.question;
let questionType = questionObject.type;
let correctAnswer = questionObject.correct_answer;
$('.answers option[value="correct_answer"]').text = correctAnswer;
i should put them in the top of js page?
ive got this error
Script.js:8 Uncaught TypeError: Cannot read property ‘question’ of undefined
What happens if you console.log(questionsArray) ?
i get this error Script.js:14 Uncaught TypeError: Cannot read property ‘question’ of undefined
at Script.js:14
in this line let question = questionObject.question;
What happens if you console.log(questionsArray) after you retrieve the data, and before you’re trying to do anything with that data?