Input and Output

Validation

HTML5 provides built-in form validation features that help ensure users enter the correct data before submitting a form. These features include required fields, pattern matching, and specific input types. The required attribute can be used to make a field mandatory, while the pattern attribute allows for custom regular expressions to validate input.

Example:

Here is an example of the lumberjack question requiring specific input types which is an example of validation

if (lumberjack && tree) {
    // Get the quiz question from the lumberjack's data
    const question = lumberjack.data.quiz.questions[0];
    // Prompt the player with the quiz question and get their answer
    const answer = prompt(`${lumberjack.data.quiz.title}\n${question}`);
    if (answer === '1') {
        // If the player answers "1", chop the tree
        alert("The tree was chopped down!");
        tree.chopTree();  // Call chopTree on the actual tree instance
    } else if (answer === '2') {
        // If the player answers "2", do not chop the tree
        alert("The tree was not chopped down.");
    } else {
        // If the player provides an invalid response, show an error message
        alert("Invalid response. Please answer with 1 or 2.");
    }
}

Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, allowing developers to manipulate the content, structure, and style of a webpage using JavaScript. The DOM provides methods to access and update elements, attributes, and text within the document.

Example:

The code updates the canvas rendering, which is part of DOM manipulation

const frameWidth = this.spriteData.pixels.width / this.spriteData.orientation.columns;
        const frameHeight = this.spriteData.pixels.height / this.spriteData.orientation.rows;
        const frameX = this.idleFrameIndex * frameWidth;
        const frameY = this.spriteData.idle.row * frameHeight;

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.drawImage(

HTML5 Input

HTML5 introduced new input types that enhance the user experience and provide better data validation. These new input types include email, url, number, range, date, time, color, and more. They allow for more specific data entry and can trigger different input methods on mobile devices.

Example: