// // Cloned by Jade on 2 Dec 2023 from World "Chat with GPT model" by Starter user
// // Please leave this clone trail here.
// //CHATGPT API
// // talk to OpenAI GPT model (ChatGPT)
// // adapted from:
// // https://platform.openai.com/docs/api-reference/making-requests
// const openaiURL = "https://api.openai.com/v1/chat/completions"; // can POST to this 3rd party URL
// const themodel = "gpt-3.5-turbo"; // the OpenAI model we are going to talk to
// // default API key and prompt:
// var apikey = "";
// var theprompt = "hello";
// // default body is margin 0 and padding 0
// // give it more whitespace:
// $('body').css( "margin", "20px" );
// $('body').css( "padding", "20px" );
// document.write ( `
// <h1> Chat with GPT model </h1>
// Running World:
// <a href='https://ancientbrain.com/world.php?world=2850716357'>Chat with GPT model</a>.
// <br>
// Chat with
// <A HREF="https://platform.openai.com/docs/models/overview">GPT 3.5</A>
// using the
// <A HREF="https://en.wikipedia.org/wiki/OpenAI">OpenAI </A> API.
// <br>
// This is the model
// <A HREF="https://en.wikipedia.org/wiki/ChatGPT">ChatGPT</A> uses.
// <pre>
// </pre>
// <h3> Enter API key </h3>
// The crucial thing is you need an "API key" to talk to OpenAI. <br>
// Register for free and get your API key
// <a href='https://platform.openai.com/account/api-keys'>here</a>.
// <br>
// You enter your API key below and then chat away.
// Then communications to OpenAI come from your IP address using your API key.
// <br>
// This World will never store your API key.
// You can view the <a href='https://ancientbrain.com/viewjs.php?world=2850716357'> source code</a> to see that is true!
// <p>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE='' >
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// <pre>
// </pre>
// <div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
// <h3> Enter a "prompt" </h3>
// <INPUT style="width:50vw;" id=me value="when did henry vii die?" >
// <button onclick="sendchat();" class=ab-normbutton > Send </button>
// </div>
// <div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
// <h3> GPT replies </h3>
// <div id=them > </div>
// </div>
// <p> <i> Be warned that GPT replies are often completely inaccurate.<br>
// All LLM systems <a href="https://www.google.com/search?q=llm+hallucination"> "hallucinate"</a>.
// It is how they work. </i> </p>
// <pre>
// </pre>
// ` );
// function setkey()
// {
// apikey = jQuery("input#apikey").val();
// apikey = apikey.trim();
// $("#enterkey").html ( "<b> API key has been set. </b>" );
// }
// // Enter will also send chat:
// document.getElementById('me').onkeydown = function(event) { if (event.keyCode == 13) sendchat(); };
// // --- Send my line of text ----------------------------------------------------------------
// function sendchat()
// {
// theprompt = $("#me").val();
// // construct request as JSON
// // "Lowering temperature means it will take fewer risks, and completions will be more accurate and deterministic. Increasing temperature will result in more diverse completions."
// var thedata = {
// "model": themodel,
// "temperature": 0.7,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// // then as string representing that JSON:
// var thedatastring = JSON.stringify ( thedata );
// // HTTP headers must be set up with API key:
// $.ajaxSetup({
// headers:
// {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// // POST to 3rd party URL:
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function ( d, rc ) { successfn ( d, rc ); },
// error: function() { errorfn (); }
// });
// }
// // global variable to examine return data in console
// var a;
// function successfn ( data, rc )
// {
// a = data;
// var answer = a["choices"][0].message.content;
// $("#them").html ( answer );
// }
// function errorfn()
// {
// if ( apikey == "" ) $("#them").html ( "<font color=red><b> Enter API key to be able to chat. </b></font>" );
// else $("#them").html ( "<font color=red><b> Unknown error. </b></font>" );
// }
// RANDOM USER GEN API
// Function to fetch random user data based on criteria
// async function getRandomUser(criteria) {
// try {
// // Construct the API URL with criteria
// const apiUrl = `https://randomuser.me/api/${criteria ? '&' + criteria : ''}`;
// // Make a request to the Random User Generator API endpoint
// const response = await fetch(apiUrl, { method: 'GET' });
// // Parse the response JSON
// const data = await response.json();
// // Extract the first user from the results
// const user = data.results[0];
// // Display user data on the webpage
// displayUserData(user);
// } catch (error) {
// console.error('Error fetching random user data:', error);
// }
// }
// // Function to display user data on the webpage
// function displayUserData(user) {
// // Create a container element
// const container = document.createElement('div');
// // Populate the container with user data
// container.innerHTML = `
// <h2>User Information</h2>
// <p>Name: ${user.name.first} ${user.name.last}</p>
// <p>Email: ${user.email}</p>
// <p>Location: ${user.location.city}, ${user.location.state}, ${user.location.country}</p>
// <p>Phone: ${user.phone}</p>
// <img src="${user.picture.large}" alt="User Picture">
// `;
// // Append the container to the document body or any other desired element
// document.body.appendChild(container);
// }
// // Call the function to get a random female user from the US
// // You can pass additional criteria as a string, e.g., 'results=1&inc=name,email'
// getRandomUser();
// // DEEPAI API
// // default API key and prompt:
// var deepAiApiKey = "";
// var theprompt = "Please enter your prompt here";
// document.write ( `
// <h1> Chat with DeepAI </h1>
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="deepAiApiKey" id="deepAiApiKey" VALUE='' >
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// function callDeepAITextGenerator(prompt) {
// const apiUrl = 'https://api.deepai.org/api/text-generator';
// return fetch(apiUrl, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// 'api-key': deepAiApiKey,
// },
// body: JSON.stringify({ text: prompt }),
// })
// .then(response => {
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// return response.json();
// })
// .then(data => data.output)
// .catch(error => {
// console.error('Error calling DeepAI Text Generator:', error.message);
// throw error;
// });
// }
// function handlePromptSubmission() {
// const promptInput = document.getElementById('promptInput');
// const resultDisplay = document.getElementById('resultDisplay');
// const userPrompt = promptInput.value;
// if (userPrompt.trim() === '') {
// alert('Please enter a prompt.');
// return;
// }
// callDeepAITextGenerator(userPrompt)
// .then(result => {
// resultDisplay.textContent = result;
// })
// .catch(error => {
// resultDisplay.textContent = 'Error occurred. Please check the console for details.';
// console.error(error);
// });
// }
// // Example usage: Call the DeepAI Text Generator with a default prompt
// callDeepAITextGenerator('Hello, world!')
// .then(result => console.log('Example Result:', result))
// .catch(error => console.error('Example Error:', error));
// // DEEP AI
// var deepAiApiKey = "";
// var theprompt = "Please enter your prompt here";
// document.write (`
// <h1>Chat with DeepAI</h1>
// <h3>Enter API key</h3>
// <div id="enterkey">
// Enter API key:
// <input style="width: 25vw;" maxlength="2000" name="deepAiApiKey" id="deepAiApiKey" value="" >
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div>
// <label for="promptInput">Enter a prompt:</label>
// <input type="text" id="promptInput">
// <button onclick="handlePromptSubmission();" class="ab-normbutton">Generate Text</button>
// </div>
// <div id="resultDisplay"></div>
// `);
// function callDeepAITextGenerator(prompt) {
// const apiUrl = 'https://api.deepai.org/api/text-generator';
// return fetch(apiUrl, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// 'api-key': deepAiApiKey,
// },
// body: JSON.stringify({ text: prompt }),
// })
// .then(response => {
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// return response.json();
// })
// .then(data => data.output)
// .catch(error => {
// console.error('Error calling DeepAI Text Generator:', error.message);
// throw error;
// });
// }
// function handlePromptSubmission() {
// const promptInput = document.getElementById('promptInput');
// const resultDisplay = document.getElementById('resultDisplay');
// const userPrompt = promptInput.value;
// if (userPrompt.trim() === '') {
// alert('Please enter a prompt.');
// return;
// }
// callDeepAITextGenerator(userPrompt)
// .then(result => {
// resultDisplay.textContent = result;
// })
// .catch(error => {
// resultDisplay.textContent = 'Error occurred. Please check the console for details.';
// console.error(error);
// });
// }
// // Example usage: Call the DeepAI Text Generator with a default prompt
// callDeepAITextGenerator('Hello, world!')
// .then(result => console.log('Example Result:', result))
// .catch(error => console.error('Example Error:', error));
// <!-- DEEPAI API -->
// <!-- default API key and prompt: -->
// var deepAiApiKey = "";
// var theprompt = "Please enter your prompt here";
// document.write (`
// <h1>Chat with DeepAI</h1>
// <h3>Enter API key</h3>
// <div id="enterkey">
// Enter API key:
// <input style="width: 25vw;" maxlength="2000" name="deepAiApiKey" id="deepAiApiKey" value="" >
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div>
// <label for="promptInput">Enter a prompt:</label>
// <input type="text" id="promptInput">
// <button onclick="handlePromptSubmission();" class="ab-normbutton">Generate Text</button>
// </div>
// <div id="resultDisplay"></div>
// `);
// function callDeepAITextGenerator(prompt) {
// const apiUrl = 'https://api.deepai.org/api/text-generator';
// return fetch(apiUrl, {
// method: 'POST', // Change from GET to POST
// headers: {
// 'Content-Type': 'application/json',
// 'api-key': deepAiApiKey,
// },
// body: JSON.stringify({ text: prompt }),
// })
// .then(response => {
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// return response.json();
// })
// .then(data => data.output)
// .catch(error => {
// console.error('Error calling DeepAI Text Generator:', error.message);
// throw error;
// });
// }
// function handlePromptSubmission() {
// const promptInput = document.getElementById('promptInput');
// const resultDisplay = document.getElementById('resultDisplay');
// const userPrompt = promptInput.value;
// if (userPrompt.trim() === '') {
// alert('Please enter a prompt.');
// return;
// }
// callDeepAITextGenerator(userPrompt)
// .then(result => {
// resultDisplay.textContent = result;
// })
// .catch(error => {
// resultDisplay.textContent = 'Error occurred. Please check the console for details.';
// console.error(error);
// });
// }
// // Example usage: Call the DeepAI Text Generator with a default prompt
// callDeepAITextGenerator('Hello, world!')
// .then(result => console.log('Example Result:', result))
// .catch(error => console.error('Example Error:', error));
// const apiUrl = 'https://trueway-matrix.p.rapidapi.com/CalculateDrivingMatrix';
// // Prompt the user for API key and coordinates
// const apiKey = prompt('Enter API Key:');
// const coordinates = prompt('Enter Coordinates (comma-separated):');
// // Check if both API key and coordinates are provided
// if (!apiKey || !coordinates) {
// console.log('Please enter both API Key and Coordinates.');
// } else {
// // Construct the URL with user input
// const url = `${apiUrl}?origins=${coordinates}&destinations=${coordinates}&avoid_highways=true&avoid_tolls=true`;
// // Set up the fetch options
// const options = {
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'trueway-matrix.p.rapidapi.com'
// }
// };
// // Make the fetch request
// fetch(url, options)
// .then(response => {
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// return response.text();
// })
// .then(result => {
// console.log(result);
// })
// .catch(error => {
// console.error('Error fetching matrix:', error.message);
// });
// }
// const readline = require('readline');
// const fetch = require('node-fetch');
// const rl = readline.createInterface({
// input: process.stdin,
// output: process.stdout
// });
// function prompt(question) {
// return new Promise(resolve => {
// rl.question(question, answer => {
// resolve(answer);
// });
// });
// }
// async function fetchMatrix() {
// const apiKey = await prompt('Enter API Key: ');
// const coordinates = await prompt('Enter Coordinates (comma-separated): ');
// if (!apiKey || !coordinates) {
// console.log('Please enter both API Key and Coordinates.');
// rl.close();
// return;
// }
// const apiUrl = `https://trueway-matrix.p.rapidapi.com/CalculateDrivingMatrix?` +
// `origins=${coordinates}&destinations=${coordinates}&avoid_highways=true&avoid_tolls=true`;
// try {
// const response = await fetch(apiUrl, {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// 'X-RapidAPI-Host': 'trueway-matrix.p.rapidapi.com',
// 'X-RapidAPI-Key': apiKey,
// },
// });
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// const result = await response.json();
// console.log(JSON.stringify(result, null, 2));
// } catch (error) {
// console.error('Error fetching matrix:', error.message);
// } finally {
// rl.close();
// }
// }
// // Run the function
// fetchMatrix();
// const readline = require('readline');
// const fetch = require('node-fetch');
// const rl = readline.createInterface({
// input: process.stdin,
// output: process.stdout
// });
// function prompt(question) {
// return new Promise(resolve => {
// rl.question(question, answer => {
// resolve(answer);
// });
// });
// }
// async function fetchMatrix(apiKey) {
// if (!apiKey) {
// console.log('Please enter a valid API Key.');
// rl.close();
// return;
// }
// const coordinates = '40.7128,-74.0060'; // Example coordinates
// const apiUrl = `https://trueway-matrix.p.rapidapi.com/CalculateDrivingMatrix?` +
// `origins=${coordinates}&destinations=${coordinates}&avoid_highways=true&avoid_tolls=true`;
// try {
// const response = await fetch(apiUrl, {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// 'X-RapidAPI-Host': 'trueway-matrix.p.rapidapi.com',
// 'X-RapidAPI-Key': apiKey,
// },
// });
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// const result = await response.json();
// console.log(JSON.stringify(result, null, 2));
// } catch (error) {
// console.error('Error fetching matrix:', error.message);
// } finally {
// rl.close();
// }
// }
// async function main() {
// const apiKey = await prompt('Enter API Key for TrueWay Matrix API: ');
// fetchMatrix(apiKey);
// }
// // Run the function
// main();
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const origins = '40.7128,-74.0060;40.7128,-74.0061';
// const destinations = '40.7129,-74.0060;40.7129,-74.0061';
// const apiUrl = `https://trueway-matrix.p.rapidapi.com/CalculateDrivingMatrix?origins=${origins}&destinations=${destinations}&avoid_highways=true&avoid_tolls=true`;
// try {
// const response = await fetch(apiUrl, {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// 'X-RapidAPI-Host': 'trueway-matrix.p.rapidapi.com',
// 'X-RapidAPI-Key': apiKey,
// },
// });
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// const result = await response.json();
// console.log(result);
// } catch (error) {
// console.error('Error fetching matrix:', error.message);
// }
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const origins = '40.7128,-74.0060;40.7128,-74.0061';
// const destinations = '40.7129,-74.0060;40.7129,-74.0061';
// async function fetchData() {
// const apiUrl = `https://trueway-matrix.p.rapidapi.com/CalculateDrivingMatrix?origins=${origins}&destinations=${destinations}&avoid_highways=true&avoid_tolls=true`;
// try {
// const response = await fetch(apiUrl, {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// 'X-RapidAPI-Host': 'trueway-matrix.p.rapidapi.com',
// 'X-RapidAPI-Key': apiKey,
// },
// });
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// const result = await response.json();
// console.log(result);
// } catch (error) {
// console.error('Error fetching matrix:', error.message);
// }
// }
// // Call the async function
// fetchData();
// const url = 'https://hotels4.p.rapidapi.com/v2/get-meta-data';
// const options = {
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// 'X-RapidAPI-Host': 'hotels4.p.rapidapi.com'
// }
// };
// try {
// const response = await fetch(url, options);
// const result = await response.text();
// console.log(result);
// } catch (error) {
// console.error(error);
// }
// (async () => {
// const url = 'https://hotels4.p.rapidapi.com/locations/search?query=new%20york&locale=en_US';
// const options = {
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// 'X-RapidAPI-Host': 'hotels4.p.rapidapi.com'
// }
// };
// try {
// const response = await fetch(url, options);
// const result = await response.text();
// console.log(result);
// } catch (error) {
// console.error(error);
// }
// })();
// (async () => {
// // Ask the user to enter an area
// const userArea = prompt('Enter an area:');
// if (!userArea) {
// console.log('Please enter an area.');
// return;
// }
// // URL encode the user-entered area
// const encodedArea = encodeURIComponent(userArea);
// const url = `https://hotels4.p.rapidapi.com/locations/search?query=${encodedArea}&locale=en_US`;
// const options = {
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// 'X-RapidAPI-Host': 'hotels4.p.rapidapi.com'
// }
// };
// try {
// const response = await fetch(url, options);
// const result = await response.text();
// console.log(result);
// } catch (error) {
// console.error(error);
// }
// })();
// // DEEP AI
// var deepAiApiKey = "";
// var theprompt = "Please enter your areahere";
// document.write (`
// <h1>Chat with DeepAI</h1>
// <h3>Enter API key</h3>
// <div id="enterkey">
// Enter API key:
// <input style="width: 25vw;" maxlength="2000" name="deepAiApiKey" id="deepAiApiKey" value="" >
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div>
// <label for="promptInput">Enter a prompt:</label>
// <input type="text" id="promptInput">
// <button onclick="handlePromptSubmission();" class="ab-normbutton">Generate Text</button>
// </div>
// <div id="resultDisplay"></div>
// `);
// function callDeepAITextGenerator(prompt) {
// const apiUrl = 'https://hotels4.p.rapidapi.com/locations/search?query=${encodedArea}&locale=en_US';
// return fetch(apiUrl, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// 'api-key': deepAiApiKey,
// },
// body: JSON.stringify({ text: prompt }),
// })
// .then(response => {
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// return response.json();
// })
// .then(data => data.output)
// .catch(error => {
// console.error('Error calling DeepAI Text Generator:', error.message);
// throw error;
// });
// }
// function handlePromptSubmission() {
// const promptInput = document.getElementById('promptInput');
// const resultDisplay = document.getElementById('resultDisplay');
// const userPrompt = promptInput.value;
// if (userPrompt.trim() === '') {
// alert('Please enter an area in the US.');
// return;
// }
// callDeepAITextGenerator(userPrompt)
// .then(result => {
// resultDisplay.textContent = result;
// })
// .catch(error => {
// resultDisplay.textContent = 'Error occurred. Please check the console for details.';
// console.error(error);
// });
// }
// // Example usage: Call the DeepAI Text Generator with a default prompt
// callDeepAITextGenerator('Hello, world!')
// .then(result => console.log('Example Result:', result))
// .catch(error => console.error('Example Error:', error));
// <!DOCTYPE html>
// <html lang="en">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>City Information</title>
// </head>
// <body>
// <button onclick="fetchCityData()">Get City Data</button>
// <div id="cityData"></div>
// <script>
// async function fetchCityData() {
// // Get your API key from RapidAPI
// const apiKey = 'YOUR_API_KEY';
// // Make sure to replace 'YOUR_API_KEY' with your actual API key
// // URL of the API
// const apiUrl = 'https://wirefreethought-citydb-v1.p.rapidapi.com/v1/geo/cities';
// try {
// // Fetch data from the API
// const response = await fetch(apiUrl, {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// 'X-RapidAPI-Host': 'wirefreethought-citydb-v1.p.rapidapi.com',
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// },
// });
// // Check if the request was successful
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// // Parse the JSON response
// const data = await response.json();
// // Display the data on the webpage
// const cityDataElement = document.getElementById('cityData');
// cityDataElement.textContent = JSON.stringify(data, null, 2);
// } catch (error) {
// console.error('Error fetching city data:', error.message);
// }
// }
// </script>
// </body>
// </html>
// // Your API key
// const apiKey = 'YOUR_API_KEY';
// async function fetchCityData() {
// const apiUrl = 'https://wirefreethought-citydb-v1.p.rapidapi.com/v1/geo/cities';
// try {
// const response = await fetch(apiUrl, {
// method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// 'X-RapidAPI-Host': 'wirefreethought-citydb-v1.p.rapidapi.com',
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// },
// });
// if (!response.ok) {
// throw new Error('Network response was not ok');
// }
// const data = await response.json();
// // Use document.write to display the data
// document.write('<pre>' + JSON.stringify(data, null, 2) + '</pre>');
// } catch (error) {
// console.error('Error fetching city data:', error.message);
// }
// }
// // Call the function
// fetchCityData();
// const settings = {
// async: true,
// crossDomain: true,
// url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/countries/US',
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings).done(function (response) {
// console.log(response);
// });
/// GOOD
// const settings = {
// async: true,
// crossDomain: true,
// url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/countries/US',
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff',
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings).done(function (response) {
// // Use document.write to display the response
// document.write('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
// });
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff'; // Replace with your API key
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// alert('Please enter a country code.');
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings).done(function (response) {
// // Use document.write to display the response
// document.write('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
// });
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// alert('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.');
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// // $.ajax(settings).done(function (response) {
// // // Use document.write to display the response
// // document.write('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
// // });
// // }
// $.ajax(settings)
// .done(function (response) {
// // Use document.write to display the response
// document.write('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// alert('Country not found. Please enter a valid country code.');
// } else {
// alert('Error occurred. Please try again later.');
// }
// });
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// alert('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.');
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Update the document body content with the response
// document.body.innerHTML = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// alert('Country not found. Please enter a valid country code.');
// } else {
// alert('Error occurred. Please try again later.');
// }
// });
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(resultContainer);
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// alert('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.');
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Update the result container with the response
// resultContainer.innerHTML = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 429 ) {
// alert('Country not found. Please enter a valid country code.');
// } else {
// alert('Error occurred. Please try again later.');
// }
// });
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Update the result container with the response
// resultContainer.innerHTML = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// // Create an input element for the API key
// const apiKeyInput = document.createElement('input');
// apiKeyInput.type = 'text';
// apiKeyInput.id = 'apiKeyInput';
// // Create a label element for the API key
// const apiKeyLabel = document.createElement('label');
// apiKeyLabel.textContent = 'Enter your API key:';
// apiKeyLabel.setAttribute('for', 'apiKeyInput');
// // Create an input element for the country code
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element for the country code
// const countryLabel = document.createElement('label');
// countryLabel.textContent = 'Enter a country code:';
// countryLabel.setAttribute('for', 'countryInput');
// // Create a button element to fetch country information
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(apiKeyLabel);
// document.body.appendChild(apiKeyInput);
// document.body.appendChild(countryLabel);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = apiKeyInput.value;
// const userCountry = countryInput.value;
// if (!apiKey || !userCountry) {
// displayMessage('Please enter both your API key and a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Update the result container with the response
// resultContainer.innerHTML = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// $(document).ready(function () {
// // Create an input element for the API key
// const apiKeyInput = document.createElement('input');
// apiKeyInput.type = 'text';
// apiKeyInput.id = 'apiKeyInput';
// // Create a label element for the API key
// const apiKeyLabel = document.createElement('label');
// apiKeyLabel.textContent = 'Enter your API key:';
// apiKeyLabel.setAttribute('for', 'apiKeyInput');
// // Create an input element for the country code
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element for the country code
// const countryLabel = document.createElement('label');
// countryLabel.textContent = 'Enter a country code:';
// countryLabel.setAttribute('for', 'countryInput');
// // Create a button element to fetch country information
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(apiKeyLabel);
// document.body.appendChild(apiKeyInput);
// document.body.appendChild(countryLabel);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const apiKey = apiKeyInput.value;
// const userCountry = countryInput.value;
// if (!apiKey || !userCountry) {
// displayMessage('Please enter both your API key and a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Update the result container with the response
// resultContainer.innerHTML = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// });
// var apiKey = "";
// $('body').css( "margin", "20px" );
// $('body').css( "padding", "20px" );
// document.write ( `
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE='' >
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// ` );
// function setkey()
// {
// apiKey = jQuery("input#apiKey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html ( "<b> API key has been set. </b>" );
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// // const apiKey = '68bd925be8mshfeff3a11db23660p12ed07jsn19b3486664ff';
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Update the result container with the response
// resultContainer.innerHTML = '<pre>' + JSON.stringify(response, null, 2) + '</pre>';
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(response).length === 0) {
// displayMessage('No data available for the specified country.', true);
// return;
// }
// // Create a table element
// const table = document.createElement('table');
// table.style.width = '100%';
// table.style.borderCollapse = 'collapse';
// // Loop through response and create rows in the table
// for (const [key, value] of Object.entries(response)) {
// const row = table.insertRow();
// const cell1 = row.insertCell(0);
// const cell2 = row.insertCell(1);
// cell1.textContent = key;
// cell2.textContent = JSON.stringify(value);
// cell1.style.border = '1px solid #dddddd';
// cell2.style.border = '1px solid #dddddd';
// cell1.style.padding = '8px';
// cell2.style.padding = '8px';
// }
// // Append the table to the result container
// resultContainer.appendChild(table);
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(response).length === 0) {
// displayMessage('No data available for the specified country.', true);
// return;
// }
// // Create a string with titles separated by newlines
// const titlesString = Object.keys(response).join('\n');
// // Display the titles in a pre element
// const titlesElement = document.createElement('pre');
// titlesElement.textContent = titlesString;
// resultContainer.appendChild(titlesElement);
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(response).length === 0) {
// displayMessage('No data available for the specified country.', true);
// return;
// }
// // Create a string with titles separated by newlines
// const titlesString = Object.keys(response).join('\n');
// // Display the titles in a pre element
// const titlesElement = document.createElement('pre');
// titlesElement.textContent = titlesString;
// resultContainer.appendChild(titlesElement);
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred. Please try again later.', true);
// }
// });
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// url2: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// // First AJAX request
// $.ajax(settings)
// .done(function (response) {
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(response).length === 0) {
// displayMessage('No data available for the specified country.', true);
// return;
// }
// // Create a string with formatted data
// const formattedData = JSON.stringify(response, null, 2);
// // Display the formatted data in a pre element
// const dataElement = document.createElement('pre');
// dataElement.textContent = formattedData;
// resultContainer.appendChild(dataElement);
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred: API not recognized, please try again later.', true);
// }
// });
// // Second AJAX request
// $.ajax({
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// })
// .done(function (response) {
// // Check if the response is not empty
// if (Object.keys(response).length !== 0) {
// // Create a string with formatted data
// const formattedData = JSON.stringify(response, null, 2);
// // Display the formatted data in a pre element
// const dataElement = document.createElement('pre');
// dataElement.textContent = formattedData;
// resultContainer.appendChild(dataElement);
// }
// })
// .fail(function () {
// // Handle the failure of the second request if needed
// });
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// url2: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// $.ajax(settings)
// .done(function (response) {
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(response).length === 0) {
// displayMessage('No data available for the specified country.', true);
// return;
// }
// // Create a string with formatted data
// const formattedData = JSON.stringify(response, null, 2);
// // Display the formatted data in a pre element
// const dataElement = document.createElement('pre');
// dataElement.textContent = formattedData;
// resultContainer.appendChild(dataElement);
// })
// .fail(function (jqXHR) {
// if (jqXHR.status === 404) {
// displayMessage('Country not found. Please enter a valid ISO country code. Examples include US, GB, CA', true);
// } else {
// displayMessage('Error occurred: API not recognised, please try again later.', true);
// }
// });
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // First AJAX request
// const settings1 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response1 = await fetch(settings1.url, settings1);
// const result1 = await response1.json();
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result1).length !== 0) {
// // Create a string with formatted data
// const formattedData1 = JSON.stringify(result1, null, 2);
// // Display the formatted data in a pre element
// const dataElement1 = document.createElement('pre');
// dataElement1.textContent = formattedData1;
// resultContainer.appendChild(dataElement1);
// // Create a button to fetch the second set of data
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Additional Information';
// fetchButton2.onclick = async function () {
// // Second AJAX request
// const settings2 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response2 = await fetch(settings2.url, settings2);
// const result2 = await response2.json();
// // Check if the response is not empty
// if (Object.keys(result2).length !== 0) {
// // Create a string with formatted data
// const formattedData2 = JSON.stringify(result2, null, 2);
// // Display the formatted data in a pre element
// const dataElement2 = document.createElement('pre');
// dataElement2.textContent = formattedData2;
// resultContainer.appendChild(dataElement2);
// } else {
// displayMessage('No additional data available for the specified country.', true);
// }
// } catch (error) {
// console.error('Error fetching additional information:', error);
// displayMessage('Error occurred while fetching additional information. Please try again later.', true);
// }
// };
// // Append the button to the result container
// resultContainer.appendChild(fetchButton2);
// }
// } catch (error) {
// console.error('Error fetching country information:', error);
// displayMessage('Error occurred. Please try again later.', true);
// }
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // First AJAX request
// const settings1 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response1 = await fetch(settings1.url, settings1);
// const result1 = await response1.json();
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result1).length !== 0) {
// // Create a string with formatted data
// const formattedData1 = JSON.stringify(result1, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement1 = document.createElement('pre');
// dataElement1.textContent = formattedData1;
// dataElement1.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement1.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement1.style.padding = '10px'; // Add padding
// dataElement1.style.borderRadius = '5px'; // Add rounded corners
// resultContainer.appendChild(dataElement1);
// // Create a button to fetch the second set of data
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Additional Information';
// fetchButton2.onclick = async function () {
// // Second AJAX request
// const settings2 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response2 = await fetch(settings2.url, settings2);
// const result2 = await response2.json();
// // Check if the response is not empty
// if (Object.keys(result2).length !== 0) {
// // Create a string with formatted data
// const formattedData2 = JSON.stringify(result2, null, 2);
// // Display the formatted data in a pre element
// const dataElement2 = document.createElement('pre');
// dataElement2.textContent = formattedData2;
// resultContainer.appendChild(dataElement2);
// } else {
// displayMessage('No additional data available for the specified country.', true);
// }
// } catch (error) {
// console.error('Error fetching additional information:', error);
// displayMessage('Error occurred while fetching additional information. Please try again later.', true);
// }
// };
// // Append the button to the result container
// resultContainer.appendChild(fetchButton2);
// }
// } catch (error) {
// console.error('Error fetching country information:', error);
// displayMessage('Error occurred. Please try again later.', true);
// }
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create an input element
// const countryInput = document.createElement('input');
// countryInput.type = 'text';
// countryInput.id = 'countryInput';
// // Create a label element
// const label = document.createElement('label');
// label.textContent = 'Enter a country code:';
// label.setAttribute('for', 'countryInput');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label);
// document.body.appendChild(countryInput);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry = document.getElementById('countryInput').value;
// if (!userCountry) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // First AJAX request
// const settings1 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response1 = await fetch(settings1.url, settings1);
// const result1 = await response1.json();
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result1).length !== 0) {
// // Create a string with formatted data
// const formattedData1 = JSON.stringify(result1, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement1 = document.createElement('pre');
// dataElement1.textContent = formattedData1;
// dataElement1.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement1.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement1.style.padding = '10px'; // Add padding
// dataElement1.style.borderRadius = '5px'; // Add rounded corners
// resultContainer.appendChild(dataElement1);
// // Create a button to fetch the second set of data
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Additional Information';
// fetchButton2.onclick = async function () {
// // Second AJAX request
// const settings2 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response2 = await fetch(settings2.url, settings2);
// const result2 = await response2.json();
// // Check if the response is not empty
// if (Object.keys(result2).length !== 0) {
// // Create a string with formatted data
// const formattedData2 = JSON.stringify(result2, null, 2);
// // Display the formatted data in a pre element
// const dataElement2 = document.createElement('pre');
// dataElement2.textContent = formattedData2;
// resultContainer.appendChild(dataElement2);
// } else {
// displayMessage('No additional data available for the specified country.', true);
// }
// } catch (error) {
// console.error('Error fetching additional information:', error);
// displayMessage('Error occurred while fetching additional information. Please try again later.', true);
// }
// };
// // Append the button to the result container
// resultContainer.appendChild(fetchButton2);
// }
// } catch (error) {
// console.error('Error fetching country information:', error);
// displayMessage('Error occurred. Please try again later.', true);
// }
// }
// // SHOWS C1 AND C2 (2 BUTTONS CHANGES AS CLICKED)
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create input elements for country codes
// const countryInput1 = document.createElement('input');
// countryInput1.type = 'text';
// countryInput1.id = 'countryInput1';
// const countryInput2 = document.createElement('input');
// countryInput2.type = 'text';
// countryInput2.id = 'countryInput2';
// // Create labels for country inputs
// const label1 = document.createElement('label');
// label1.textContent = 'Enter country code 1:';
// label1.setAttribute('for', 'countryInput1');
// const label2 = document.createElement('label');
// label2.textContent = 'Enter country code 2:';
// label2.setAttribute('for', 'countryInput2');
// // Create buttons for each country
// const fetchButton1 = document.createElement('button');
// fetchButton1.textContent = 'Fetch Country 1 Information';
// fetchButton1.onclick = function () {
// fetchCountryInfo(document.getElementById('countryInput1').value);
// };
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Country 2 Information';
// fetchButton2.onclick = function () {
// fetchCountryInfo(document.getElementById('countryInput2').value);
// };
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label1);
// document.body.appendChild(countryInput1);
// document.body.appendChild(fetchButton1);
// document.body.appendChild(label2);
// document.body.appendChild(countryInput2);
// document.body.appendChild(fetchButton2);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo(countryCode) {
// if (!countryCode) {
// displayMessage('Please enter a country code. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response = await fetch(settings.url, settings);
// const result = await response.json();
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result).length !== 0) {
// // Create a string with formatted data
// const formattedData = JSON.stringify(result, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement = document.createElement('pre');
// dataElement.textContent = formattedData;
// dataElement.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement.style.padding = '10px'; // Add padding
// dataElement.style.borderRadius = '5px'; // Add rounded corners
// resultContainer.appendChild(dataElement);
// } else {
// displayMessage(`No data available for ${countryCode}.`, true);
// }
// } catch (error) {
// console.error(`Error fetching information for ${countryCode}:`, error);
// displayMessage(`Error occurred while fetching information for ${countryCode}. Please try again later.`, true);
// }
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create input elements for country codes
// const countryInput1 = document.createElement('input');
// countryInput1.type = 'text';
// countryInput1.id = 'countryInput1';
// const countryInput2 = document.createElement('input');
// countryInput2.type = 'text';
// countryInput2.id = 'countryInput2';
// // Create labels for country inputs
// const label1 = document.createElement('label');
// label1.textContent = 'Enter country code 1:';
// label1.setAttribute('for', 'countryInput1');
// const label2 = document.createElement('label');
// label2.textContent = 'Enter country code 2:';
// label2.setAttribute('for', 'countryInput2');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label1);
// document.body.appendChild(countryInput1);
// document.body.appendChild(label2);
// document.body.appendChild(countryInput2);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry1 = document.getElementById('countryInput1').value;
// const userCountry2 = document.getElementById('countryInput2').value;
// if (!userCountry1 || !userCountry2) {
// displayMessage('Please enter both country codes. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // Function to handle fetching information for a single country
// async function fetchSingleCountryInfo(countryCode) {
// const settings = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response = await fetch(settings.url, settings);
// const result = await response.json();
// // Check if the response is not empty
// if (Object.keys(result).length !== 0) {
// // Create a string with formatted data
// const formattedData = JSON.stringify(result, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement = document.createElement('pre');
// dataElement.textContent = formattedData;
// dataElement.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement.style.padding = '10px'; // Add padding
// dataElement.style.borderRadius = '5px'; // Add rounded corners
// resultContainer.appendChild(dataElement);
// } else {
// displayMessage(`No data available for ${countryCode}.`, true);
// }
// } catch (error) {
// console.error(`Error fetching information for ${countryCode}:`, error);
// displayMessage(`Error occurred while fetching information for ${countryCode}. Please try again later.`, true);
// }
// }
// // Fetch information for both countries
// await fetchSingleCountryInfo(userCountry1);
// // Introduce a delay of 1 second before making the second request
// await new Promise(resolve => setTimeout(resolve, 2000));
// await fetchSingleCountryInfo(userCountry2);
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create input elements for country codes
// const countryInput1 = document.createElement('input');
// countryInput1.type = 'text';
// countryInput1.id = 'countryInput1';
// const countryInput2 = document.createElement('input');
// countryInput2.type = 'text';
// countryInput2.id = 'countryInput2';
// // Create labels for country inputs
// const label1 = document.createElement('label');
// label1.textContent = 'Enter country code 1:';
// label1.setAttribute('for', 'countryInput1');
// const label2 = document.createElement('label');
// label2.textContent = 'Enter country code 2:';
// label2.setAttribute('for', 'countryInput2');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label1);
// document.body.appendChild(countryInput1);
// document.body.appendChild(label2);
// document.body.appendChild(countryInput2);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry1 = document.getElementById('countryInput1').value;
// const userCountry2 = document.getElementById('countryInput2').value;
// if (!userCountry1 || !userCountry2) {
// displayMessage('Please enter both country codes. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // Function to handle fetching information for a single country
// async function fetchSingleCountryInfo(countryCode) {
// const settings1 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response1 = await fetch(settings1.url, settings1);
// const result1 = await response.json();
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result1).length !== 0) {
// // Create a string with formatted data
// const formattedData = JSON.stringify(result1, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement1 = document.createElement('pre');
// dataElement1.textContent = formattedData;
// dataElement1.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement1.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement1.style.padding = '10px'; // Add padding
// dataElement1.style.borderRadius = '5px'; // Add rounded corners
// resultContainer.appendChild(dataElement1);
// // Create a button to fetch the second set of data
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Additional Information';
// fetchButton2.onclick = async function () {
// // Second AJAX request
// const settings2 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${userCountry}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response2 = await fetch(settings2.url, settings2);
// const result2 = await response2.json();
// // Check if the response is not empty
// if (Object.keys(result2).length !== 0) {
// // Create a string with formatted data
// const formattedData2 = JSON.stringify(result2, null, 2);
// // Display the formatted data in a pre element
// const dataElement2 = document.createElement('pre');
// dataElement2.textContent = formattedData2;
// resultContainer.appendChild(dataElement2);
// } else {
// displayMessage('No additional data available for the specified country.', true);
// }
// } catch (error) {
// console.error('Error fetching additional information:', error);
// displayMessage('Error occurred while fetching additional information. Please try again later.', true);
// }
// };
// // Append the button to the result container
// resultContainer.appendChild(fetchButton2);
// }
// } catch (error) {
// console.error(`Error fetching information for ${countryCode}:`, error);
// displayMessage(`Error occurred while fetching information for ${countryCode}. Please try again later.`, true);
// }
// }
// // Fetch information for both countries
// await fetchSingleCountryInfo(userCountry1);
// // Introduce a delay of 1 second before making the second request
// await new Promise(resolve => setTimeout(resolve, 2000));
// await fetchSingleCountryInfo(userCountry2);
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create input elements for country codes
// const countryInput1 = document.createElement('input');
// countryInput1.type = 'text';
// countryInput1.id = 'countryInput1';
// const countryInput2 = document.createElement('input');
// countryInput2.type = 'text';
// countryInput2.id = 'countryInput2';
// // Create labels for country inputs
// const label1 = document.createElement('label');
// label1.textContent = 'Enter country code 1:';
// label1.setAttribute('for', 'countryInput1');
// const label2 = document.createElement('label');
// label2.textContent = 'Enter country code 2:';
// label2.setAttribute('for', 'countryInput2');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create a div element to display the result
// const resultContainer = document.createElement('div');
// // Append the elements to the document body
// document.body.appendChild(label1);
// document.body.appendChild(countryInput1);
// document.body.appendChild(label2);
// document.body.appendChild(countryInput2);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry1 = document.getElementById('countryInput1').value;
// const userCountry2 = document.getElementById('countryInput2').value;
// if (!userCountry1 || !userCountry2) {
// displayMessage('Please enter both country codes. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // Function to handle fetching information for a single country
// async function fetchSingleCountryInfo(countryCode) {
// const settings1 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response1 = await fetch(settings1.url, settings1);
// const result1 = await response1.json();
// // Clear previous results
// resultContainer.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result1).length !== 0) {
// // Create a string with formatted data
// const formattedData = JSON.stringify(result1, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement1 = document.createElement('pre');
// dataElement1.textContent = formattedData;
// dataElement1.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement1.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement1.style.padding = '10px'; // Add padding
// dataElement1.style.borderRadius = '5px'; // Add rounded corners
// resultContainer.appendChild(dataElement1);
// // Create a button to fetch the second set of data
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Additional Information';
// fetchButton2.onclick = async function () {
// // Second AJAX request
// const settings2 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response2 = await fetch(settings2.url, settings2);
// const result2 = await response2.json();
// // Check if the response is not empty
// if (Object.keys(result2).length !== 0) {
// // Create a string with formatted data
// const formattedData2 = JSON.stringify(result2, null, 2);
// // Display the formatted data in a pre element
// const dataElement2 = document.createElement('pre');
// dataElement2.textContent = formattedData2;
// resultContainer.appendChild(dataElement2);
// } else {
// displayMessage('No additional data available for the specified country.', true);
// }
// } catch (error) {
// console.error('Error fetching additional information:', error);
// displayMessage('Error occurred while fetching additional information. Please try again later.', true);
// }
// };
// // Append the button to the result container
// resultContainer.appendChild(fetchButton2);
// }
// } catch (error) {
// console.error(`Error fetching information for ${countryCode}:`, error);
// displayMessage(`Error occurred while fetching information for ${countryCode}. Please try again later.`, true);
// }
// }
// // Fetch information for both countries
// await fetchSingleCountryInfo(userCountry1);
// // Introduce a delay of 1 second before making the second request
// await new Promise(resolve => setTimeout(resolve, 2000));
// await fetchSingleCountryInfo(userCountry2);
// }
// var apiKey = "";
// $('body').css("margin", "20px");
// $('body').css("padding", "20px");
// document.write(`
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// `);
// function setkey() {
// apiKey = jQuery("input#apikey").val();
// apiKey = apiKey.trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// // Create input elements for country codes
// const countryInput1 = document.createElement('input');
// countryInput1.type = 'text';
// countryInput1.id = 'countryInput1';
// const countryInput2 = document.createElement('input');
// countryInput2.type = 'text';
// countryInput2.id = 'countryInput2';
// // Create labels for country inputs
// const label1 = document.createElement('label');
// label1.textContent = 'Enter country code 1:';
// label1.setAttribute('for', 'countryInput1');
// const label2 = document.createElement('label');
// label2.textContent = 'Enter country code 2:';
// label2.setAttribute('for', 'countryInput2');
// // Create a button element
// const fetchButton = document.createElement('button');
// fetchButton.textContent = 'Fetch Country Information';
// fetchButton.onclick = fetchCountryInfo;
// // Create a div element to display messages
// const messageContainer = document.createElement('div');
// messageContainer.style.marginTop = '10px';
// // Create div elements to display the result for each country
// const resultContainer1 = document.createElement('div');
// resultContainer1.style.marginTop = '10px';
// const resultContainer2 = document.createElement('div');
// resultContainer2.style.marginTop = '10px';
// // Append the elements to the document body
// document.body.appendChild(label1);
// document.body.appendChild(countryInput1);
// document.body.appendChild(label2);
// document.body.appendChild(countryInput2);
// document.body.appendChild(fetchButton);
// document.body.appendChild(messageContainer);
// document.body.appendChild(resultContainer1);
// document.body.appendChild(resultContainer2);
// // Function to display messages
// function displayMessage(message, isError = false) {
// const messageElement = document.createElement('div');
// messageElement.textContent = message;
// messageElement.style.color = isError ? 'red' : 'green';
// messageContainer.appendChild(messageElement);
// }
// // Function to fetch country information
// async function fetchCountryInfo() {
// const userCountry1 = document.getElementById('countryInput1').value;
// const userCountry2 = document.getElementById('countryInput2').value;
// if (!userCountry1 || !userCountry2) {
// displayMessage('Please enter both country codes. You can use ISO 3166 country codes. For example: US, GB, CA, etc.', true);
// return;
// }
// // Function to handle fetching information for a single country
// async function fetchSingleCountryInfo(countryCode, container) {
// const settings1 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response1 = await fetch(settings1.url, settings1);
// const result1 = await response1.json();
// // Clear previous results
// container.innerHTML = '';
// // Check if the response is not empty
// if (Object.keys(result1).length !== 0) {
// // Create a string with formatted data
// const formattedData = JSON.stringify(result1, null, 2);
// // Display the formatted data in a pre element with styling
// const dataElement1 = document.createElement('pre');
// dataElement1.textContent = formattedData;
// dataElement1.style.whiteSpace = 'pre-wrap'; // Allow text to wrap
// dataElement1.style.backgroundColor = '#f4f4f4'; // Light gray background
// dataElement1.style.padding = '10px'; // Add padding
// dataElement1.style.borderRadius = '5px'; // Add rounded corners
// container.appendChild(dataElement1);
// // Create a button to fetch the second set of data
// const fetchButton2 = document.createElement('button');
// fetchButton2.textContent = 'Fetch Additional Information';
// fetchButton2.onclick = async function () {
// // Second AJAX request
// const settings2 = {
// async: true,
// crossDomain: true,
// url: `https://wft-geo-db.p.rapidapi.com/v1/geo/countries/${countryCode}/places`,
// method: 'GET',
// headers: {
// 'X-RapidAPI-Key': apiKey,
// 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
// }
// };
// try {
// const response2 = await fetch(settings2.url, settings2);
// const result2 = await response2.json();
// // Check if the response is not empty
// if (Object.keys(result2).length !== 0) {
// // Create a string with formatted data
// const formattedData2 = JSON.stringify(result2, null, 2);
// // Display the formatted data in a pre element
// const dataElement2 = document.createElement('pre');
// dataElement2.textContent = formattedData2;
// container.appendChild(dataElement2);
// } else {
// displayMessage('No additional data available for the specified country.', true);
// }
// } catch (error) {
// console.error('Error fetching additional information:', error);
// displayMessage('Error occurred while fetching additional information. Please try again later.', true);
// }
// };
// // Append the button to the result container
// container.appendChild(fetchButton2);
// }
// } catch (error) {
// console.error(`Error fetching information for ${countryCode}:`, error);
// displayMessage(`Error occurred while fetching information for ${countryCode}. Please try again later.`, true);
// }
// }
// // Fetch information for both countries
// await fetchSingleCountryInfo(userCountry1, resultContainer1);
// // Introduce a delay of 1 second before making the second request
// await new Promise(resolve => setTimeout(resolve, 2000));
// await fetchSingleCountryInfo(userCountry2, resultContainer2);
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// $('body').css("margin", "20px").css("padding", "20px");
// document.write(`
// <h1> Chat with GPT model </h1>
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// <pre></pre>
// <div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
// <h3> Enter a "prompt" </h3>
// <input style="width:50vw;" id=me value="when did henry vii die?">
// <button onclick="sendchat();" class=ab-normbutton > Send </button>
// </div>
// <div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
// <h3> GPT replies </h3>
// <div id=them > </div>
// </div>
// <pre></pre>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// function sendchat() {
// theprompt = $("#me").val();
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (d) { $("#them").html(d.choices[0].message.content); },
// error: function () { $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>"); }
// });
// }
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let questions = [
// { prompt: "What is the capital of France?", answer: "Paris" },
// { prompt: "Which planet is known as the Red Planet?", answer: "Mars" },
// // Add more questions as needed
// ];
// let currentQuestionIndex = 0;
// let score = 0;
// $('body').css("margin", "20px").css("padding", "20px");
// document.write(`
// <h1> Quiz with GPT model </h1>
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// <div id=quiz-container>
// <h3 id="question">Question 1:</h3>
// <input style="width:50vw;" id="user-answer" placeholder="Your answer">
// <button onclick="checkAnswer();" class=ab-normbutton >Submit Answer</button>
// <div id="scoreboard">Score: 0</div>
// <div id="them"></div>
// </div>
// <pre></pre>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// showQuestion();
// }
// function showQuestion() {
// if (currentQuestionIndex < questions.length) {
// const currentQuestion = questions[currentQuestionIndex];
// $("#question").text(`Question ${currentQuestionIndex + 1}: ${currentQuestion.prompt}`);
// $("#user-answer").val('');
// } else {
// endQuiz();
// }
// }
// function checkAnswer() {
// const userAnswer = $("#user-answer").val().trim();
// const currentQuestion = questions[currentQuestionIndex];
// if (userAnswer.toLowerCase() === currentQuestion.answer.toLowerCase()) {
// score++;
// }
// currentQuestionIndex++;
// updateScoreboard();
// showQuestion();
// }
// function updateScoreboard() {
// $("#scoreboard").text(`Score: ${score}`);
// }
// function endQuiz() {
// $("#quiz-container").html(`<h2>Quiz completed!</h2><p>Your final score is ${score}/${questions.length}</p>`);
// }
// const openaiURL = "https://api.openai.com/v1/engines/gpt-3.5-turbo/completions";
// let apikey = "";
// let currentQuestionIndex = 0;
// let score = 0;
// $('body').css("margin", "20px").css("padding", "20px");
// document.write(`
// <h1> Quiz with GPT model </h1>
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// <div id=quiz-container>
// <h3 id="question">Question 1:</h3>
// <input style="width:50vw;" id="user-answer" placeholder="Your answer">
// <button onclick="askQuestion();" class=ab-normbutton >Submit Answer</button>
// <div id="scoreboard">Score: 0</div>
// <div id="them"></div>
// </div>
// <pre></pre>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// askQuestion();
// }
// $.ajaxSetup({
// headers:
// {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// function askQuestion() {
// var thedata = {
// "model": themodel,
// "temperature": 0.7,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// var thedatastring = JSON.stringify ( thedata );
// const requestData = {
// prompt: null,
// max_tokens: 100,
// n: 1,
// stop: null,
// temperature: 0.7,
// messages: conversation,
// };
// const requestSettings = {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey,
// },
// body: JSON.stringify(requestData),
// };
// fetch(openaiURL, requestSettings)
// .then(response => response.json())
// .then(data => handleQuestion(data))
// .catch(error => console.error("Error asking question:", error));
// }
// function handleQuestion(data) {
// const question = data.choices[0].message.content;
// $("#question").text(`Question ${currentQuestionIndex + 1}: ${question}`);
// }
// function checkAnswer() {
// const userAnswer = $("#user-answer").val().trim();
// const currentQuestion = questions[currentQuestionIndex];
// if (userAnswer.toLowerCase() === currentQuestion.answer.toLowerCase()) {
// score++;
// }
// currentQuestionIndex++;
// updateScoreboard();
// askQuestion();
// }
// function updateScoreboard() {
// $("#scoreboard").text(`Score: ${score}`);
// }
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// $('body').css("margin", "20px").css("padding", "20px");
// document.write(`
// <h1> Quiz Generation with AI </h1>
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// <pre></pre>
// <div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
// <h3> Enter a topic for questions </h3>
// <input style="width:50vw;" id=me value="history">
// <button onclick="generateQuestions();" class=ab-normbutton > Generate Questions </button>
// </div>
// <div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
// <h3> Generated Quiz Questions </h3>
// <div id=them > </div>
// </div>
// <pre></pre>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (d) { $("#them").html(d.choices[0].message.content); },
// error: function () { $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>"); }
// });
// }
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// $('body').css("margin", "20px").css("padding", "20px");
// document.write(`
// <h1> Quiz Generation with AI </h1>
// <h3> Enter API key </h3>
// <div id=enterkey>
// Enter API key:
// <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
// <button onclick='setkey();' class=ab-normbutton >Set API key</button>
// </div>
// <pre></pre>
// <div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
// <h3> Enter a topic for questions </h3>
// <input style="width:50vw;" id=me value="history">
// <button onclick="generateQuestions();" class=ab-normbutton > Generate Questions </button>
// </div>
// <div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
// <h3> Generated Quiz Questions </h3>
// <div id=them > </div>
// </div>
// <pre></pre>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (d) { $("#them").html(d.choices[0].message.content); },
// error: function () { $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>"); }
// });
// }
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// // Add a style tag to inject CSS styles
// document.write(`
// <style>
// body {
// margin: 20px;
// padding: 20px;
// font-family: 'Arial', sans-serif;
// }
// h1, h3 {
// text-align: center;
// }
// #enterkey, #generated-quiz {
// width: 60vw;
// background-color: white;
// border: 1px solid black;
// margin: 20px;
// padding: 20px;
// }
// input {
// width: 50vw;
// }
// button {
// display: block;
// margin-top: 10px;
// padding: 10px;
// cursor: pointer;
// background-color: #3888db;
// color: #fff;
// border: none;
// border-radius: 5px;
// }
// #generated-quiz {
// background-color: #ffffcc;
// }
// pre {
// display: none;
// }
// </style>
// <h1> Quiz Generation with AI </h1>
// <h3> Enter API key </h3>
// <div id="enterkey">
// Enter API key:
// <input style="width:25vw;" maxlength="2000" NAME="apikey" id="apikey" VALUE="">
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div id="generated-quiz">
// <h3> Enter a topic for questions </h3>
// <input style="width:50vw;" id="me" value="history">
// <button onclick="generateQuestions();" class="ab-normbutton"> Generate Questions </button>
// <div id="them"></div>
// </div>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. </b>");
// }
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (d) { $("#them").html(d.choices[0].message.content); },
// error: function () { $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>"); }
// });
// }
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// document.write(`
// <style>
// body {
// margin: 20px;
// padding: 20px;
// font-family: 'Arial', sans-serif;
// }
// h1, h3 {
// text-align: center;
// }
// #enterkey {
// width: 30vw;
// background-color: pink;
// border: 1px solid black;
// margin: 10px;
// padding: 10px;
// }
// input {
// width: 50vw;
// }
// button {
// display: block;
// margin-top: 10px;
// padding: 10px;
// cursor: pointer;
// background-color: #3498db;
// color: #fff;
// border-radius: 5px;
// }
// #generated-quiz {
// background-color: #add8e6;
// border: 1px solid black;
// margin: 70px;
// padding: 70px
// }
// pre {
// display: none;
// }
// </style>
// <h1> Quiz Generation with AI </h1>
// <h3> Enter API key </h3>
// <div id="enterkey">
// Enter API key:
// <input style="width:25vw;" maxlength="2000" NAME="apikey" id="apikey" VALUE="">
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div id="generated-quiz">
// <h3> Enter a topic for questions </h3>
// <input style="width:50vw;" id="me" value="history">
// <button onclick="generateQuestions();" class="ab-normbutton"> Generate Questions </button>
// <div id="them"></div>
// </div>
// `);
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. Ready to continue :)</b>");
// }
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (data) {
// const responseContent = data.choices[0].message.content;
// const formattedContent = formatQuestions(responseContent);
// $("#them").html(formattedContent);
// }
// function formatQuestions(content) {
// const questions = content.split(/\d+\./).filter(Boolean);
// const formattedQuestions = questions.map((question, index) => {
// const formattedQuestion = question.trim();
// return `<p><strong>${index + 1}. ${formattedQuestion}</strong></p>`;
// });
// return formattedQuestions.join('');
// }
// // success: function (d) { $("#them").html(d.choices[0].message.content); },
// error: function () { $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>"); }
// });
// }
// // API KEY CONFIGURATION
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// // STYLING
// document.write(`
// <style>
// body {
// margin: 20px;
// padding: 20px;
// font-family: 'Arial', sans-serif;
// }
// h1, h3 {
// text-align: center;
// }
// #enterkey {
// width: 30vw;
// background-color: pink;
// border: 1px solid black;
// margin: 10px;
// padding: 10px;
// }
// input {
// width: 50vw;
// }
// button {
// display: block;
// margin-top: 10px;
// padding: 10px;
// cursor: pointer;
// background-color: #3498db;
// color: #fff;
// border-radius: 5px;
// }
// #generated-quiz {
// background-color: #add8e6;
// border: 1px solid black;
// margin: 70px;
// padding: 70px;
// }
// pre {
// display: none;
// }
// </style>
// <h1> Quiz Generation with AI </h1>
// <div id="enterkey">
// Enter Open AI API Key
// <input style="width:30vw;" maxlength="2000" NAME="apikey" id="apikey" VALUE="">
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div id="generated-quiz">
// <font color=blue><h2> Enter a Topic For Generated Quiz Questions and Sample Answers</h2></font>
// <input style="width:50vw;" id="me" value="The History of AI">
// <button onclick="generateQuestions();" class="ab-normbutton"> Generate Questions </button>
// <div id="them"></div>
// </div>
// `);
// // FUNCTION TO SET API KEY
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. Ready to continue :)</b>");
// }
// // PROMPT TO GENERAGE QUIZ RESOURCE
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers formatted as question> Answer:`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// // API SETUP
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (data) {
// const responseContent = data.choices[0].message.content;
// const formattedContent = formatQuestions(responseContent);
// $("#them").html(formattedContent);
// },
// error: function () {
// $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>");
// }
// });
// }
// // FORMATTING QUIZ
// function formatQuestions(content) {
// const questions = content.split(/\d+\./).filter(Boolean);
// const formattedQuestions = questions.map((question, index) => {
// const formattedQuestion = question.trim();
// const lines = formattedQuestion.split('Answer:').map(line => line.trim());
// // const lines = formattedQuestion.split(/[-]|Answer:/).map(line => line.trim());
// const formattedLines = lines.map((line, lineIndex) => {
// if (lineIndex > 0) {
// // Add a line break and change the color for the word 'Answer'
// return `<br><span style="color: green;">Answer:</span> ${line}`;
// }
// return line;
// });
// return `<p><strong>${index + 1}.</strong> ${formattedLines.join('')}</p>`;
// });
// return formattedQuestions.join('');
// }
// // API KEY CONFIGURATION
// // API KEY CONFIGURATION
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// let responseContent = ""; // Define responseContent as a global variable
// // STYLING
// document.write(`
// <style>
// body {
// margin: 20px;
// padding: 20px;
// font-family: 'Arial', sans-serif;
// }
// h1, h3 {
// text-align: center;
// }
// #enterkey {
// width: 30vw;
// background-color: pink;
// border: 1px solid black;
// margin: 10px;
// padding: 10px;
// }
// input {
// width: 50vw;
// }
// button {
// display: block;
// margin-top: 10px;
// padding: 10px;
// cursor: pointer;
// background-color: #3498db;
// color: #fff;
// border-radius: 5px;
// }
// #generated-quiz {
// background-color: #add8e6;
// border: 1px solid black;
// margin: 70px;
// padding: 70px;
// }
// #quiz-box {
// width: 60vw;
// background-color: #f0f0f0;
// border: 1px solid black;
// margin: 20px;
// padding: 20px;
// }
// .quiz-question {
// margin-bottom: 10px;
// }
// .quiz-answer-input {
// width: 40vw;
// margin-right: 10px;
// }
// .quiz-submit-button {
// padding: 10px;
// cursor: pointer;
// background-color: #3498db;
// color: #fff;
// border-radius: 5px;
// }
// #quiz-feedback {
// margin-top: 10px;
// }
// pre {
// display: none;
// }
// </style>
// <h1> Quiz Generation with AI </h1>
// <div id="enterkey">
// Enter Open AI API Key
// <input style="width:30vw;" maxlength="2000" NAME="apikey" id="apikey" VALUE="">
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div id="generated-quiz">
// <font color=blue><h2> Enter a Topic For Generated Quiz Questions and Sample Answers</h2></font>
// <input style="width:50vw;" id="me" value="The History of AI">
// <button onclick="generateQuestions();" class="ab-normbutton"> Generate Questions </button>
// <div id="them"></div>
// </div>
// <div id="quiz-box">
// <h3>Quiz Time!</h3>
// <div id="quiz-feedback"></div>
// <div id="quiz-questions"></div>
// <button onclick="checkAnswers();" class="quiz-submit-button">Submit Answers</button>
// </div>
// `);
// // FUNCTION TO SET API KEY
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. Ready to continue :)</b>");
// }
// // PROMPT TO GENERATE QUIZ RESOURCE
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers formatted as question> Answer:`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// // API SETUP
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (data) {
// responseContent = data.choices[0].message.content;
// const formattedContent = formatQuestions(responseContent);
// $("#them").html(formattedContent);
// loadQuiz(); // Load the quiz questions after generating
// },
// error: function () {
// $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>");
// }
// });
// }
// // FORMATTING QUIZ
// function formatQuestions(content) {
// const questions = content.split(/\d+\./).filter(Boolean);
// const formattedQuestions = questions.map((question, index) => {
// const formattedQuestion = question.trim();
// const lines = formattedQuestion.split('Answer:').map(line => line.trim());
// // const lines = formattedQuestion.split(/[-]|Answer:/).map(line => line.trim());
// const formattedLines = lines.map((line, lineIndex) => {
// if (lineIndex > 0) {
// // Add a line break and change the color for the word 'Answer'
// return `<br><span style="color: green;">Answer:</span> ${line}`;
// }
// return line;
// });
// // Wrap each question with an input field
// const formattedQuestionsWithInputs = formattedQuestions.map((question, index) => {
// return `<div class="quiz-question">${question}<br><input class="quiz-answer-input" type="text" placeholder="Your Answer for Question ${index + 1}"></div>`;
// });
// return `<p><strong>${index + 1}.</strong> ${formattedLines.join('')}</p>`;
// });
// return formattedQuestions.join('');
// }
// function formatQuestions(content) {
// const questions = content.split(/\d+\./).filter(Boolean);
// const formattedQuestions = [];
// questions.forEach((question, index) => {
// const formattedQuestion = question.trim();
// const lines = formattedQuestion.split('Answer:').map(line => line.trim());
// const formattedLines = lines.map((line, lineIndex) => {
// if (lineIndex > 0) {
// // Add a line break and change the color for the word 'Answer'
// return `<br><span style="color: green;">Answer:</span> ${line}`;
// }
// return line;
// });
// // Wrap each question with an input field
// const formattedQuestionWithInputs = `<p><strong>${index + 1}.</strong> ${formattedLines.join('')}</p>`;
// formattedQuestions.push(formattedQuestionWithInputs);
// });
// return formattedQuestions.join('');
// }
// function loadQuiz() {
// const questions = formatQuestions(responseContent);
// $("#quiz-questions").html(questions);
// }
// function checkAnswers() {
// const userAnswers = [];
// $(".quiz-answer-input").each(function (index, element) {
// userAnswers.push($(element).val().trim());
// });
// const correctAnswers = getCorrectAnswers(responseContent);
// let correctCount = 0;
// let feedback = "<p><strong>Quiz Results:</strong></p>";
// userAnswers.forEach((userAnswer, index) => {
// const correctAnswer = correctAnswers[index];
// feedback += `<p class="quiz-question">Question ${index + 1}: Your Answer - ${userAnswer}. Correct Answer - ${correctAnswer}</p>`;
// if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
// correctCount++;
// }
// });
// feedback += `<p><strong>Score: ${correctCount}/${userAnswers.length}</strong></p>`;
// $("#quiz-feedback").html(feedback);
// }
// function getCorrectAnswers(content) {
// // Extract correct answers from content
// const regex = /Answer:(.*?)(?=(\d+\.|$))/g;
// let match;
// const correctAnswers = [];
// while ((match = regex.exec(content)) !== null) {
// const answer = match[1].trim();
// correctAnswers.push(answer);
// }
// return correctAnswers;
// }
// // API KEY CONFIGURATION
// const openaiURL = "https://api.openai.com/v1/chat/completions";
// const themodel = "gpt-3.5-turbo";
// let apikey = "";
// let theprompt = "";
// // STYLING
// document.write(`
// <style>
// body {
// margin: 20px;
// padding: 20px;
// font-family: 'Arial', sans-serif;
// }
// h1, h3 {
// text-align: center;
// }
// #enterkey {
// width: 30vw;
// background-color: pink;
// border: 1px solid black;
// margin: 10px;
// padding: 10px;
// }
// input {
// width: 50vw;
// }
// button {
// display: block;
// margin-top: 10px;
// padding: 10px;
// cursor: pointer;
// background-color: #3498db;
// color: #fff;
// border-radius: 5px;
// }
// #generated-quiz {
// background-color: #add8e6;
// border: 1px solid black;
// margin: 70px;
// padding: 70px;
// }
// pre {
// display: none;
// }
// </style>
// <h1> Quiz Generation with AI </h1>
// <div id="enterkey">
// Enter Open AI API Key
// <input style="width:30vw;" maxlength="2000" NAME="apikey" id="apikey" VALUE="">
// <button onclick="setkey();" class="ab-normbutton">Set API key</button>
// </div>
// <div id="generated-quiz">
// <font color=blue><h2> Enter a Topic For Generated Quiz Questions and Sample Answers</h2></font>
// <font color=blue><p>Generation takes around 30 seconds...</p></font>
// <input style="width:50vw;" id="me" value="The History of AI">
// <button onclick="generateQuestions();" class="ab-normbutton"> Generate Questions </button>
// <div id="them"></div>
// </div>
// `);
// // FUNCTION TO SET API KEY
// function setkey() {
// apikey = jQuery("input#apikey").val().trim();
// $("#enterkey").html("<b> API key has been set. Ready to continue :)</b>");
// }
// // PROMPT TO GENERAGE QUIZ RESOURCE
// function generateQuestions() {
// const topic = $("#me").val();
// theprompt = `generate me 10 random questions on ${topic} and their answers formatted as question> Answer:`;
// const thedata = {
// "model": themodel,
// "temperature": 0.10,
// "messages": [{
// "role": "user",
// "content": theprompt
// }]
// };
// const thedatastring = JSON.stringify(thedata);
// // API SETUP
// $.ajaxSetup({
// headers: {
// "Content-Type": "application/json",
// "Authorization": "Bearer " + apikey
// }
// });
// $.ajax({
// type: "POST",
// url: openaiURL,
// data: thedatastring,
// dataType: "json",
// success: function (data) {
// const responseContent = data.choices[0].message.content;
// const formattedContent = formatQuestions(responseContent);
// $("#them").html(formattedContent);
// },
// error: function () {
// $("#them").html(apikey ? "<font color=red><b> Unknown error. </b></font>" : "<font color=red><b> Enter API key to be able to chat. </b></font>");
// }
// });
// }
// // FORMATTING QUIZ
// function formatQuestions(content) {
// const questions = content.split(/\d+\./).filter(Boolean);
// const formattedQuestions = questions.map((question, index) => {
// const formattedQuestion = question.trim();
// const lines = formattedQuestion.split('Answer:').map(line => line.trim());
// // const lines = formattedQuestion.split(/[-]|Answer:/).map(line => line.trim());
// const formattedLines = lines.map((line, lineIndex) => {
// if (lineIndex > 0) {
// // Add a line break and change the color for the word 'Answer'
// return `<br><span style="color: green;">Answer:</span> ${line}`;
// }
// return line;
// });
// return `<p><strong>${index + 1}.</strong> ${formattedLines.join('')}</p>`;
// });
// return formattedQuestions.join('');
// }
// API KEY CONFIGURATION
const openaiURL = "https://api.openai.com/v1/chat/completions";
const themodel = "gpt-3.5-turbo";
var apikey = "";
var theprompt = "";
// STYLING
document.write(`
<style>
body {
margin: 25px;
padding: 25px;
font-family: 'Arial', sans-serif;
}
h1, h3, h2 {
text-align: center;
}
#enterkey {
width: 30vw;
background-color: pink;
border: 1px solid black;
margin: 10px;
padding: 10px;
}
input {
width: 50vw;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
cursor: pointer;
background-color: #3498db;
color: #fff;
border-radius: 5px;
}
#generated-quiz {
background-color: #add8e6;
border: 1px solid black;
margin: 70px;
padding: 70px;
}
pre {
display: none;
}
</style>
<h1> Quiz Generation with AI </h1>
<h3>A multifunctional tool to assist students in studying specific topics. </h3>
<div id="enterkey">
Enter Open AI API Key
<input style="width:30vw;" maxlength="100" NAME="apikey" id="apikey" VALUE="">
<button onclick="SetKey();" class="ab-normbutton">Set API key</button>
</div>
<div id="generated-quiz">
<font color=blue><h1>Enter a Topic To Generate Quiz Questions and Sample Answers</h1></font>
<font color=blue><p>Generation takes around 30 seconds...</p></font>
<p id="responseTime"></p>
<input style="width:50vw;" id="me" value="The History of AI">
<button onclick="GenQuiz();" class="ab-normbutton"> Generate Questions </button>
<div id="them"></div>
</div>
`);
// FUNCTION TO SET API KEY
function SetKey() {
apikey = document.getElementById("apikey").value.trim();
document.getElementById("enterkey").innerHTML = "<b> API key has been set successfully. Ready to continue :)</b>";
}
// PROMPT TO GENERAGE QUIZ RESOURCE
function GenQuiz() {
const topic = $("#me").val();
theprompt = `generate me 10 random questions on ${topic} and their answers formatted as question> Answer:`;
const data = {
"model": themodel,
"temperature": 0.10,
"messages": [{
"role": "user",
"content": theprompt
}]
};
const thedatastring = JSON.stringify(data);
// API SETUP
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey
},
body: thedatastring
};
const starttime = performance.now(); // Captures the start time
fetch(openaiURL, requestOptions)
.then(response => {
const endtime = performance.now(); // Captures the finish time
const responsetime = endtime - starttime; // Calculates response time in milliseconds based on end
$("#responsetime").text(`Response time: ${responsetime} milliseconds`);
if (response.ok) {
return response.json();
} else {
throw new Error("Unknown error");
}
})
.then(data => {
const result = data.choices[0].message.content;
const formatted = Format(result);
$("#them").html(formatted);
})
.catch(error => {
$("#them").html(apikey ? `<font color="red"><b>${error.message}</b></font>` : '<font color="red"><b>Enter API key to proceed.</b></font>');
});
}
// FORMATTING QUIZ
function Format(content) {
const questions = content.split(/\d+\./).filter(Boolean); // Divides up the input by finding questions beginning with a number and dot (1.)
const formattedQuestions = questions.map((question, index) => {
const formatted = question.trim();
const lines = formatted.split('Answer:').map(line => line.trim()); // Divides question by splitting into question and answer
const formattedlines = lines.map((line, lineIndex) => {
if (lineIndex > 0) {
return `<br><span style="color: green;">Answer:</span> ${line}`;
}
return line;
});
return `<p><strong>${index + 1}.</strong> ${formattedlines.join('')}</p>`;
});
return formattedQuestions.join('');
}