Create a Web form to help in creating “Jumble” puzzles. Create a form that has f
ID: 3698965 • Letter: C
Question
Create a Web form to help in creating “Jumble” puzzles.
Create a form that has four input fields named Word1, Word2, Word3, and Word4, as well as “Reset” and “Submit” buttons. Create a form processing script that verifies that all four words are entered, that all of them contain only letters, and that all four are between 4 and 7 characters long. Once all of the words have been verified as correct, use the strtoupper() and str_shuffle() functions to produce four jumbled sets of letters.
To create the Jumble Maker form:
1. Create a new document in your text editor. Type the <!DOCTYPE html> declaration, <html> element, header information, and <body> element. The page title should be "Jumble Maker”, add to <title> </title> element.
2. Add the following HTML form tags in the body of the document:
<form action= "process_JumbleMaker.php" method="post">
Word 1: <input type="text" name="Word1" /><br />
Word 2: <input type="text" name="Word2" /><br />
Word 3: <input type="text" name="Word3" /><br />
Word 4: <input type="text" name="Word4" /><br />
<input type="reset" value="Clear Form" />
<input type="submit" name="Submit" value="Send Form" />
</form>
3. Save the document as JumbleMaker.html
4. Create a new document in your text editor. Type the <!DOCTYPE html> declaration, <html> element, header information, and <body> element. The title of the page should be “Jumble Maker”, add to the <title> ... </title> element.
5. Add the opening and closing tags for the PHP script section in the body of the document: <?php ?>
6. Create a function called displayError(). This function displays the error message, and takes two parameters: $fieldName, which is the name of the field as it appears on the Web form; and $errorMsg, which describes the error for the user. There is no return value for this function.
7. Create a second function called validateWord() below the displayError() function. This function takes two parameters. The first parameter, $data, is a string to be validated. The second parameter, $fieldName, is the name of the form field. The function returns the $data parameter after it has been cleaned up. After validating the user input, use the built-in PHP function strtoupper() (Links to an external site.)Links to an external site. and str_shuffle (Links to an external site.)Links to an external site.() to change all letters to uppercase and shuffle the letters.
8. Immediately after the validateWord() function, declare and initialize a new variable called $errorCount and a new array called $words[] as follows:
$errorCount = 0;
$words = array();
9. Add assignment statements for the $words array variable to receive the output of the validateWord() function for each form field:
$words[] = validateWord($_POST['Word1'], "Word 1");
$words[] = validateWord($_POST['Word2'], "Word 2");
$words[] = validateWord($_POST['Word3'], "Word 3");
$words[] = validateWord($_POST['Word4'], "Word 4");
10. Add a conditional statement immediately after the values of $words have been assigned. This statement will display the total number of errors found or the shuffled words if there were no errors.
if ($errorCount>0)
echo "Please use the "Back" button to re-enter the data.<br /> ";
else {
$wordnum = 0;
foreach ($words as $word)
echo "Word ".++$wordnum.": $word<br /> ";
}
11. Save the document as process_JumbleMaker.php.
12. Open the JumbleMaker.html page in the Web browser by entering the following URL: http://localhost/JumbleMaker.html.
13. Test the form. It should only show the jumbled results if all four words were entered correctly.
Explanation / Answer
<!-- the form (JumbleMaker.html) as described in the question. -->
<!DOCTYPE html>
<html>
<head>
<title>Jumble Maker</title>
</head>
<body>
<form action= "process_JumbleMaker.php" method="post">
Word 1: <input type="text" name="Word1" /><br />
Word 2: <input type="text" name="Word2" /><br />
Word 3: <input type="text" name="Word3" /><br />
Word 4: <input type="text" name="Word4" /><br />
<input type="reset" value="Clear Form" />
<input type="submit" name="Submit" value="Send Form" />
</form>
</body>
</html>
------------------------------------------------------------------------------
<!-- This is the php script for processing the form ( process_JumbleMaker.php ) -->
<!DOCTYPE html>
<html>
<head>
<title>Jumble Maker</title>
</head>
<body>
<?php
function displayError($fieldName, $errorMsg) {
// displayError function as stated in the question.
echo $fieldName . ": " . $errorMsg . "<br/>";
}
function validateWord($data, $fieldName) {
// function for validatingvform data
if (strlen($data) < 4 || strlen($data) > 7) {
displayError($fieldName, 'Length of word is not between 4 and 7.');
return -1;
} elseif (ctype_alpha($data)) { // ctype_alpha($string) is a php function which returns true if string contains // all the letters, false otherwise.
displayError($fieldName, 'Word does not contain only letters.');
return -1;
} else {
$data = strtoupper($data);
$data = str_shuffle($data);
}
return $data;
}
$errorCount = 0;
$words = array();
$words[] = validateWord($_POST['Word1'], "Word 1");
$words[] = validateWord($_POST['Word2'], "Word 2");
$words[] = validateWord($_POST['Word3'], "Word 3");
$words[] = validateWord($_POST['Word4'], "Word 4");
foreach ($words as $value) { // increament the count if there are errors.
if ($value == -1) {
$errorCount++;
}
}
if ($errorCount > 0) {
echo "Please use the "Back" button to re-enter the data.<br /> ";
} else {
$wordnum = 0;
foreach ($words as $word) {
echo "Word " . ++$wordnum . ": $word<br /> ";
}
}
?>
</body>
</html>