Skip to content

Instantly share code, notes, and snippets.

@SiddharthShyniben
Created July 27, 2021 15:44
Show Gist options
  • Save SiddharthShyniben/dcb2e81888fa6cc6687a70440e7a688b to your computer and use it in GitHub Desktop.
Save SiddharthShyniben/dcb2e81888fa6cc6687a70440e7a688b to your computer and use it in GitHub Desktop.
Terminal Quiz
<section class="section">
<div class="container">
<h1 class="title">
Check the console/devtools!!
</h1>
<p class="subtitle">
Or read my <strong><a href='todo'>blog post</a></strong>!
</p>
</div>
</section>
/******* Start Utils *******/
/*
* Define a prop in an object
*/
const define = (key, val) => Object.defineProperty(window, key, val);
/*
* Camel casify a string
*/
const camelize = str => str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => index === 0 ? word.toLowerCase() : word.toUpperCase()).replace(/\s+/g, "");
/*
* Build a TriviaDB query
*/
const buildTDBQuery = (number = 10) => `https://opentdb.com/api.php?amount=${ number > 0 && number < 10 ? number : 10}`;
/*
Get quiz questions
*/
const getQuizQuestions = (...opts) => {
const url = buildTDBQuery(...opts);
const questions = [];
return fetch(url)
.then(res => res.json())
.then(res => res.results.map(question => ({
question: `${question.question}`,
options: [
camelize(question.correct_answer),
...question.incorrect_answers.map(camelize)
]
})))
.catch(error => {
error(
'An error has occured. Please try refreshing the page. The error is down there 👇.'
);
console.error(error);
});
};
/******* End Utils *******/
/******* Start Messaging *******/
/*
Log an instruction to the console
*/
const instruction = (msg = '') => console.log('%c' + msg, 'padding: 0.3rem 1.5rem; font-family: Roboto; font-size: 1.2em; line-height: 1.4em; font-style: italic; border: 2px solid white;');
/*
Log an error to the console
*/
const error = (msg = '') => console.log('%c' + msg, 'background-color: #E22134; padding: 0.3rem 1.5rem; font-family: Roboto; font-size: 1.2em; line-height: 1.4em; color: white;');
/*
Generate the CSS for a pill
*/
const pill = (backgroundColor = 'orange', fontColor = 'black') => {
return `background-color: ${backgroundColor}; color: ${fontColor}; padding: 0.15rem 0.75rem; font-family: Roboto; font-size: 1.2em; line-height: 1.4em; border-radius: 10px; margin: 2px;`
}
/*
Log all the options as pills
*/
const options = opts => console.log(
// TIL Flatmap
'Options: ' + opts.map(opt => '%c' + opt).join(''), ...opts.map(() => pill())
)
/******* End messaging *******/
/******* Start assigning *******/
const cmds = [];
const setCmd = (key, handler) => {
cmds.push({key, handler});
define(key, handler);
};
const clearCmd = key => {
delete window[key];
cmds = cmds.filter(cmd => cmd.key !== key);
};
const clearAllCmds = () => {
cmds.forEach(({key}) => delete window[key]);
cmds = [];
};
/******* End assigning *******/
/******* Actually start asking *******/
const startQuizSession = () => {
instruction('Fetching data... Please wait');
getQuizQuestions().then((res) => {
console.clear();
});
};
instruction('Welcome to the trivia quiz! Here, we\'ll get you questions from the Open Trivia DB (opentdb.com) and ask them to you. Try to answer as good as you can!');
instruction('First, choose how many questions you would like to answer');
const nums = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
const qCount = 10;
nums.forEach((num, index) => setCmd(num, () => {
qCount = index + 1;
clearAllCmds();
return num;
}));
options(nums);
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment