Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>History Test</h1>
<h2>American Revolution</h2>
<form id="test" METHOD=POST>
  <div id="question"></div>
  <input type="button" value="Next Question" id="button" onClick=nextQuestion(this.form)>
</form>
              
            
!

CSS

              
                h1 {
  text-align:center;
  font-size:2em;
  margin:1em;
}
h2 {
  text-align:center;
  font-size:1.5em;
  margin-bottom:1em;
}
#test {
  position:relative;
}
#question {
  width:600px;
  margin:0 auto 1em auto;
}
#button {
  display:block;
  margin:0 auto;
  padding: 10px;
  background: #444;
  border:none;
  color:white;
}
input[type="radio"] {
  margin-right:10px;
  margin-bottom:5px;
}
.score {
  text-align:center;
}
              
            
!

JS

              
                document.getElementById("question");
var counter = 0;
var score = 0;
var incorrect = [];

window.onload = function(){
    newQuestion();
}

function newQuestion() {
  if(counter >= allQuestions.length) endQuiz();
  else
  var insertion = "<p>" + allQuestions[counter].question + "</p>";
  for(i=0; i < allQuestions[counter].choices.length; i++) insertion += "<input id='" + i + "'type='radio' name='answer' value='" + i + "'><label for='" + i + "'>" + allQuestions[counter].choices[i] + "</label></br>"; 
  question.innerHTML = insertion;
}

function endQuiz() {
  console.log("endQuiz Triggered");
  var finalText = "<p class='score'>You Scored " + score + " out of " + allQuestions.length + ".</p>";
  question.innerHTML = finalText;
  document.getElementById('button').style.display = "none";
}

function nextQuestion() {
  checkScore();
  counter++;
  newQuestion();
}

function getRadioVal(form, name) {
  var val;
  var radios = form.elements[name];
  
  for (var i = 0, len = radios.length; i<len; i++) {
    if ( radios[i].checked ) {
      val = radios[i].value;
      break;
    }
  }
  return val;
}

function checkScore() {
  var val = getRadioVal(document.getElementById('test'), 'answer');
  if (val == allQuestions[counter].correctAnswer) {
    score++;
  } else {
    incorrect.push([counter, allQuestions[counter].choices[val]]);
    console.log(incorrect);
  }
}

var allQuestions = [{
      question: "Which of the following contributed most to the American victory in the Revolution?",
      choices: [      
        "French military and financial assistance.",
        "the failure of Loyalists to participate in military action.",
        "a major American military victory at Valley Forge.",
        "support from the French Canadians.",
        "the British failure to capture Philadelphia."
        ],
      correctAnswer: 0
    },
    {
      question: "The Declaration of Independence stated that?",
      choices: [
        "men are created unequal.",
        "governments derive their power from God.",
        "it was not right that a small island should rule a large continent.",
        "people have the right to abolish governments destructive of their rights.",
        "there shall be no taxation without representation."
      ],
      correctAnswer: 3
    },
    {
      question: "British strategy after 1778 was to?",
      choices: [
        "Subdue New England by severing it from the other colonies, invading it from Quebec, and blockading it from the sea.",
        "Capitalize on their relations with Native Americans in order to stabilize the backcountry and then press eastward toward the seacoast.",
        "Seize key southern posts, enlist the aid of loyalist militiamen, and move northward to pacify one region after another.",
        "Hang on until the Americans were worn down, out of supplies, and bankrupt."
      ],
      correctAnswer: 2
    },
    {
      question: "Why did relations between the elites and the common people change as a result of the American Revolution?",
      choices: [
        "the distribution of wealth changed dramatically during the Revolutionary era.",
        "the elites learned that they would have to treat the common people with respect in order to receive their support.",
        "the new state constitutions radically democratized politics and reduced the power of the elites.",
        "the departure of the loyalists removed most of the pre-Revolutionary elite from the nation."
      ],
      correctAnswer: 1
    },
    {
      question: "What was the role of African-Americans in the American Revolution?",
      choices: [
        "as the war dragged on, southern blacks were increasingly welcome to enlist.",
        "Americans generally avoided arming blacks, but the British eagerly recruited runaway slaves.",
        "though still enslaved, they rallied around the revolutionary rhetoric of freedom, uniformly supporting the American cause.",
        "very few slaves escaped to freedom; those who did, found themselves welcomed in the north, the West Indies, or Canada."
      ],
      correctAnswer: 1
    },
    {
      question: "Why was South Carolina less likely than Maryland to support the American Revolution?",
      choices: [
        "the Anglican church had less influence in South Carolina than it did in Maryland.",
        "there were fewer Scotch-Irish in South Carolina than there were in Maryland.",
        "South Carolina had a lower percentage of tenant farmers than did Maryland.",
        "the South Carolina population had a much higher percentage of blacks than did the Maryland population."
      ],
      correctAnswer: 3
    },
    {
      question: "A problem with the Spanish entry into the American Revolution against Britain was that Spain?",
      choices: [
        "entered as an ally of France rather than of the United States.",
        "demanded that the United States surrender Georgia as a price for its help.",
        "agreed to fight the British but only on the open seas.",
        "said it would attack only the British colonies in South America."
      ],
      correctAnswer: 0
    },
    {
      question: "Britain enjoyed all of the following advantages in the Revolution EXCEPT?",
      choices: [
        "the greatest navy and best-equipped army in the world.",
        "superior industrial resources.",
        "greater commitment to the conflict.",
        "a coherent structure of command."
      ],
      correctAnswer: 2
    },
    {
      question: "General Charles Cornwallis' surrender at Yorktown resulted largely from the?",
      choices: [
        "failure of the British to capture and hold Charleston as a base of operations.",
        "mass desertion of Hessians from the British army.",
        "arrival of fresh Spanish soldiers to reinforce Washington's army.",
        "the defection of Benedict Arnold at West Point.",
        "French fleet winning control of the Chesapeake Bay."
      ],
      correctAnswer: 4
    },
    {
      question: "The Treaty of Paris in 1783 stipulated?",
      choices: [
        "British recognition of American independence.",
        "establishment of the boundaries of the new United States from the Atlantic Ocean to the Mississippi River between the Great Lakes and Spanish Florida.",
        "that Americans allow British collection of prewar debts from colonists.",
        "all of these choices are correct."
      ],
      correctAnswer: 3
    }
  ]
              
            
!
999px

Console