GithubHelp home page GithubHelp logo

mc-quiz's Introduction

Codecademy Frontend Takehome: Multiple Choice Quizzes

👋 Hi there! Thanks for taking the time to work on a frontend takehome assignment. We really appreciate you applying to work at Codecademy!

This README.md details the prompt for your assignment. Rest assured, we won't use the code for anything other than as part of your application.

You can see the competencies we'll be grading it on here. We expect this to take you roughly 2-3 hours. Please let us know if there's anything unclear about it!

We recommend copy & pasting these instructions into https://dillinger.io/ to view them as formatted text.

The Situation

Codecademy needs an embeddable multiple choice quiz widget to help learners evaluate their skills.

You're an engineer at Codecademy and tasked with building it. Hooray! 🎉

See ./mockups/*.png for rough descriptions of what it should look like.

Don't bother getting your page exactly like our mockups -- just match the general layout.

What You're Given

Your application code should live in the src/ directory. We've set it up to work with React, though you're welcome to add other libraries if you need.

In the data/quizzes.js file, we've exported for you a set of quizzes, each of which contains the following data:

  • title: A human-readable display text title for the quiz

  • questions An ordered list of questions to be asked, each of which consists of:

    • text
    • correctAnswer
    • incorrectAnswers

Feature Requirements

Your code will allow the user to take each of those quizzes in order.

  1. For a current quiz, display its title on top of the page, along with a single question’s text and randomly ordered answers -- starting with the first question

  2. When a question’s answer is clicked, it should show:

    • A ‘Next’ button at the bottom of the component
    • Either 'Correct!' or 'Incorrect...' above that button, with the correct answer outlined in green, and the incorrect answer (if any) outlined in red with a strikethrough over its text
  3. After all questions have been answered correctly, display a friendly summary screen that lists:

    • How many questions were in the quiz
    • How many of those questions were answered correctly
    • A button to move to the next quiz (or the first quiz, if they just took the last)
    • A random encouragement message (use getMessage from data/messages.js).

Delighters

In addition to the base requirements, we'll need you to pick and complete two of the following "delighter" fun features. We do mean two: completing additional features will not gain you points! Please only complete two.

  • A: Once both of the quizzes have gotten all answers correct, use getMoreQuizzes to load in more quizzes that the user can take.
  • B: In addition to the "Next" button after taking a quiz, display the number of times the quiz has been taken along with a "Retake" button.
  • C: In addition to the summary showing the number of questions correct after taking a quiz, display a list of the quiz's questions with the user's selected answer and whether it was correct beside each question.
  • D: Add tests.

See ./mockups/delighters/*.png for rough descriptions of what B and C would look like.

Submission Requirements

Please give a high-level summary of the technical decisions you made in DOCS.md. It shouldn't be a full essay - just a few sentences explaining your code's architecture and tradeoffs.

Once that's done, hooray! Send the codesandbox.io link to us and we'll take a look.

mc-quiz's People

Contributors

robojukie avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.