Git Product home page Git Product logo

html-quiz's Introduction

Quiz script

Copyright 2013 Google Inc. Written by Michał Nazarewicz. This is not a Google product.

Overview

This is a simple quiz game which supports two players (or teams).

The idea is that teams get questions alternately and if the first one does not give correct answer, the other gets a chance. If neither answers correctly, that’s a tie. Another way to play is to have teams use buzzers of some kind to determine which gets the first try at the question. The way I’ve used the script is by having two asymmetric teams and the smaller one always getting the first chance.

Configuration

Configuration is done mostly by modifying the index.html by changing content of the TITLE element which determines the title text shown at the top of the page, and the #questions DIV which determines categories and list of questions.

Categories are defined by H2 elements and each question and answer is specified as two DIV or P elements. If question or answer is a single paragraph a lone P element suffices, otherwise a DIV is necessary.

Because of script’s limitations, at least two categories must be present. There is no limit on number of questions per category, but if some categories have fewer questions, a greyed out box will be displayed.

You can put almost any kind of HTML in either a question or an answer including images, embedded audio or video etc. Beware that you may need to add some styling for the elements to show up properly on the question board and when printing.

Secondly, there is a teams variable in the quiz.js file. It contains the names of the two teams that participate (and yes, there must be two teams). Finally, if you want to localise the script to a different language, you may change the value of strTie and strClose variables.

Usage

First of all, you should check print preview and print the web page as it will give you list of questions and answers for each category. If your questions are not too long you should get one-page per category printout. This may be helpful when hosting the game.

Controls of the game itself should be straightforward. As you open the site, a grid shows up with category names at the top and boxes indexed from 100 to 500 for each question in the category. Clicking on a box brings up a question board with the question, an “x” link in top right corner and three links at the bottom: “Team 1”, “Tie” and “Team 2” (the text depends on values of configuration variables in quiz.js file).

Pressing “x” hides the question board in case you’ve clicked it by mistake. “Team 1” and “Team 2” links will hide the question board, add grant appropriate amount of points to given team. The “Tie” button shows the answer to the question and replaces bottom links with a single “Close” link, which disables the question without adding points to either team. Disabling the questions greys corresponding box out and makes it impossible to display the question board again.

Lastly, team scores are displayed on the bottom. If there was any kind of mix-up and scores need to be altered it’s enough to click on the number and a prompt will show up where one can enter new score for given team.

And that’s about it, when it comes to usage – not very complicated.

html-quiz's People

Contributors

mina86 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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