Unit 1 Build a Trivia Game

Overview

For your first project you will be creating a trivia game. The topic of the trivia can be whatever you like, you will be creating custom questions using a Headless CMS.

Minimum Viable Product

  • Create a question model with a Headless CMS (Either Contentful or Agility CMS) and create at least 20 questions

(Use this video playlist a guide on how to use Contentful , try out figuring Agility CMS on your own if you want an extra challenge.)

  • Pull those questions into your website using an AJAX call (will need to read the documentation for the Headless CMS)
  • Create a Two player game where players can alternate turns and track their score
  • Mobile-First Design (Media Queries, Flex-Box, and Grid should help you achieve this)
  • Readme Documentation on your project

Prerequistes

In order to help set you up for success you are required to do the following before you attempt to plan out your project:

Watch

Mastering Markdown - 34min

You will need to write and update markdown for this project as will be the case for all future projects so it's your responsibility to become familiar with the syntax.

Select Your Headless CMS

A Headless CMS gives you access to the ability to create custom data in a database visually without you having to create your own custom backend (which you will be doing in units 2, 3, 4). Once you create the data, you can access the data by the API of the headless CMS. You first task should be to create your data and read the documentation to figure out how to request the data, do lean on each to help figure this part out.

Necessary Deliverables

  • Github.com repo with your project with a Readme detailing the creation of your project
  • Deployed Version of your Website. Deployed with either Netlify, Github Pages, Vercel or Surge
  • Working Two Player Trivia Game

Suggested Ways to Get Started

  • First create your question data and figure out how to pull with an AJAX Request
  • Create the basic game functionality in your app
  • Style after all the functionality is complete
  • Don't hesitate to write throwaway code to solve short-term problems.
  • Read the documentation for whatever technologies you use. Most of the time — but not always — there is a tutorial you can follow, and learning to read documentation is crucial to your success as a developer.
  • Write pseudocode before you write any JavaScript code. Planning out and thinking through interactions for a website is an important step that will save you time and effort when you start actually coding.
  • Do not simply copy and paste code that you find online! It is OK (and highly encouraged) to use resources like Stack Overflow when thinking through interactions, but use these sites as a guide and then write the code on your own.

Front End Frameworks

Try exploring these front end frameworks:

Hungry For More?

If you're looking for an extra challenge, try tackling some of the tasks below:

  • Create a reset button to replay the game without refreshing the page
  • Add Win Conditions where a player wins at a certain score and is notified

  • -

Need More Review?