Terminal Quiz

index.html

<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>

script.js

/******* 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);

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" rel="stylesheet" />

terminal-quiz.markdown

Terminal Quiz

A Pen by Siddharth on CodePen.

License.