<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./maker.css">
<title>Worksheet Maker</title>
<script>
function show_hide(intro_info) {
    if (document.getElementById(intro_info).style.display == 'block') {
      document.getElementById(intro_info).style.display = 'none';
    } else {
      document.getElementById(intro_info).style.display = 'block';
    }
}
function validateForm() {
    var w = document.forms["worksheet_submission"]["html_content"].value;
    var t = document.forms["worksheet_submission"]["user_page_title"].value;
    var h = document.forms["worksheet_submission"]["hola"].value.length;
    if (w == "" || t == "") {
        alert("A content field is empty.");
        return false;
    }
    if (h !== 0) {
        return false;
    }
}
</script>
</head>
<body>
<div class="page-container">
<header style="border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 25px;">
<h1>Worksheet Maker</h1>
<p>Generate your own fill-in-the-blank web practice. This saves paper and provides instant feedback.</p>
<p class="instr" onClick="show_hide('intro_info1')">Advantages</p>
<div id="intro_info1" style="display: none;">
<p>Reasons to use this site over Quizlet and others:</p>
<ul>
<li>No account or login necessary for worksheet creators or students</li>
<li>Download your worksheet to use it on your own computer</li>
<li>Upload your worksheet to your own website</li>
<li>Eliminate the possibility of your hard work disappearing because a web service goes away</li>
<li>No ads or tracking</li>
<li>No purchase prompts</li>
<li>Fork the source code and use your own implementation</li>
</ul>
</div>
</header>
<p class="instr" style="display: block;" onClick="show_hide('intro_info2')">Instructions</p>
<div id="intro_info2" style="display: none;">
<p>Paste your worksheet content below with the answers between square brackets. <a href="https://youtu.be/4xNq2GKN2XQ" target="_blank">View demo.</a></p>
<ul>
<li>Each answer option must be separated by commas.</li>
<li>Up to five answer options can be accepted.</li>
<li>The user's answers are not case-sensitive, i.e. <em>John Adams</em> or <em>john adams</em> would be counted correct.</li>
<li>The web practice page can be downloaded for use on your own computer or uploaded to your own webserver.</li>
<li>Tip: Hit <em>Enter</em> at any point to check answers.</li>
</ul>
</div>
<p class="instr" onClick="show_hide('intro_info3')">Example</p>
<div id="intro_info3" style="display: none; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 25px;">
<p style="margin-left: 11px; padding-left: 0;">
1. Who was the second U.S. president? [John Adams, Adams, John]<br>
2. The country of [Australia] is also its own continent.<br>
3. [George Washington Carver, Washington, George, Carver, George Carver] invented many uses for peanuts.<br>
4. 7 + 7 = [14]
</p>
<!--<pre>
1. Who was the second U.S. president? [John Adams, Adams, John]
2. The country of [Australia] is also its own continent.
3. [George Washington Carver, Washington, George, Carver, George Carver] invented many uses for peanuts.
4. 7 + 7 = [14]
</pre>-->
<a href="./example_2021-09-13_21-06-54.htm" target="_blank">View example of generated content</a>
</div>


<form name="worksheet_submission" onsubmit="return validateForm()" action="#submit" method="post">
<p style="font-size: 1.2em">Your Worksheet Title:</p>
<?php // If there is a form submission error, keep the user's input data after page refresh. ?>
<input type="text" name="user_page_title" value="<?php echo (isset($_POST['user_page_title']))?$_POST['user_page_title']:''; ?>"/>
<input type="text" name="hola" style="display: none;">
<?php // If there is a form submission error, keep the user's input data after page refresh. ?>
<p style="font-size: 1.2em">Your Worksheet Content:</p>
<textarea rows="7" name="html_content" cols="49"><?php echo (isset($_POST['html_content']))?$_POST['html_content']:''; ?></textarea>
<p><input type="checkbox" name="agreement"> I agree to follow the <a href="./terms-of-use.txt" target="_blank">Terms of Use</a>.</p>
<p style="margin-top: 25px;"><input id="submit" type="submit" name="submit" value="Submit"></p>
</form>
<?php include 'maker.php'; ?>
<footer style="border-top: 1px solid #ccc; margin-top: 25px;">
<p><a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">AGPLv3 Licensed</a> • Source code: <a href="./source.index.php" target="_blank">1</a>, <a href="./source.maker.php" target="_blank">2</a></p>
<p>This <a href="./grammar-practice-create" target="_blank">Bash script</a> accomplishes the same thing as this website, and it has multiple choice.</p>
<p>For questions, contact: bc[at]brockcochran[dot]com<br>
<p class="about" onClick="show_hide('intro_info4')">About me</p>
<div id="intro_info4" style="display: none;">
<p style="margin-top: 0;">My name is Brock Cochran. I teach Spanish at the University of Alabama at Birmingham and manage the department's computer lab.</p>
</div>
<!--<p><a href="https://paypal.me/brockcochran" target="_blank">Buy me a grocery item.</a></p>-->
</footer>
</div>
</body>
</html>