Now write script.js. It reads the three answers, builds a prompt, and uses
Axios to ask the model for a card.
First, copy this prompt:
You are a personality quiz engine based on a deck of cards. Based only on the answers below, assign ONE personality: - Suit: Hearts, Diamonds, Clubs, or Spades - Type: Ace, King, Queen, Jack, or Joker Answers: Favorite color: ${favColor} Favorite hobby: ${favHobby} Least favorite character: ${leastFavCharacter} Give: 1) The final card (e.g. "Queen of Hearts") 2) A brief 2-3 sentence explanation Rules: - Be decisive (no multiple options) - Keep it short - Output plain text only - No formatting, no lists, no emojis
Then, in script.js add the code:
const API_KEY = 'sk-or-v1-****************************************************************'; // Replace this with the API Key that you copied earlier
const hobbyInput = document.getElementById('hobby');
const characterInput = document.getElementById('character');
const colorInput = document.getElementById('color');
const resultDiv = document.getElementById('result');
async function getPersonality() {
// Get user's answers
const favHobby = hobbyInput.value;
const leastFavCharacter = characterInput.value;
const favColor = colorInput.value;
// Ask OpenAI for the users personality
resultDiv.innerHTML = 'Loading...';
const response = await axios.post(
'https://openrouter.ai/api/v1/chat/completions',
{
model: 'openai/gpt-oss-120b',
messages: [
{
role: 'user',
// Paste the prompt that you copied earlier
content: 'You are a personality quiz engine based on a deck of cards. Based only on the answers below, assign ONE personality: - Suit: Hearts, Diamonds, Clubs, or Spades - Type: Ace, King, Queen, Jack, or Joker Answers: Favorite color: ${favColor} Favorite hobby: ${favHobby} Least favorite character: ${leastFavCharacter} Give: 1) The final card (e.g. "Queen of Hearts") 2) A brief 2-3 sentence explanation Rules: - Be decisive (no multiple options) - Keep it short - Output plain text only - No formatting, no lists, no emojis',
},
],
},
{
headers: {
Authorization: 'Bearer ${API_KEY}',
'Content-Type': 'application/json',
},
}
);
const personalityMessage = response.data.choices[0].message.content;
// Display the users personality in the screen
resultDiv.innerHTML = personalityMessage;
}
How the Axios call works?
const response = await axios.post(
// URL
'https://openrouter.ai/api/v1/chat/completions',
// Object with model and messages
{
model: 'openai/gpt-oss-120b',
messages: [
{
role: 'user',
content: 'You are a personality quiz engine based on a deck of cards. Based only on the answers below, assign ONE personality: - Suit: Hearts, Diamonds, Clubs, or Spades - Type: Ace, King, Queen, Jack, or Joker Answers: Favorite color: ${favColor} Favorite hobby: ${favHobby} Least favorite character: ${leastFavCharacter} Give: 1) The final card (e.g. "Queen of Hearts") 2) A brief 2-3 sentence explanation Rules: - Be decisive (no multiple options) - Keep it short - Output plain text only - No formatting, no lists, no emojis',
},
...
Axios takes two main inputs:
- The URL of what you are talking to (the
AI model). In this case, it is OpenAI.
- An object with the
model and the messages you send.
Using await tells JavaScript to wait for the response before continuing.
Save, run, answer the three questions, and click the button. After a moment your
personality archetype appears:
