Forum How do I...?

create questions with hidden answers

pbreslin
I would like to use small PDF forms to create multiple choice/checkbox questions where the answer is hidden until the student chooses an answer and clicks a submit button. Upon clicking Submit, the correct answer would be revealed. Is that possible in Prince 16?
wangp
Not that I could recommend it, but you could do something like this with the Acrobat JavaScript API. Obviously, it only works with Acrobat.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 40px;
  }
  .question {
    margin-bottom: 20px;
  }
  input[readonly] {
    border: none;
    font-weight: bold;
    color: green;
  }
</style>
</head>
<body>

<h2>Quiz Example</h2>

<div class="question">
  <p>1. What is the capital of France?</p>

  <input type="radio" id="q1_a" name="q1" value="A">
  <label for="q1_a">A. Berlin</label><br>

  <input type="radio" id="q1_b" name="q1" value="B">
  <label for="q1_b">B. Paris</label><br>

  <input type="radio" id="q1_c" name="q1" value="C">
  <label for="q1_c">C. Madrid</label><br>

  <input type="text" name="q1_answer" value="" readonly>
</div>

<input type="button" name="submit" value="Submit">

</body>
</html>


JavaScript:
var submitBtn = this.getField('submit');
if (submitBtn) {
    submitBtn.setAction('MouseUp',
	'var ans1 = this.getField("q1_answer");' +
	'var selected = this.getField("q1").value;' +
	'if (selected == "B") {' +
	'   ans1.value = "✓ Correct!";' +
	'} else {' +
	'   ans1.value = "✗ Incorrect.";' +
	'}'
    );
}


Generate the PDF with:
prince --pdf-forms --pdf-script=quiz.js quiz.html --no-subset-fonts

I needed to add --no-subset-fonts, otherwise the "incorrect" message would be corrupted.
  1. quiz.pdf744.6 kB