123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
            
          
!
            
              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;
}
            
          
!
            
              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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console