index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>CHARACTER TEST</title>
    <link rel="stylesheet" href="index.css">
    <link rel="icon" type="image/png" href="favicon.ico">
</head>
<body>

    <nav class="nav-wrapper black">
        <div class="container">
            <a href="#home.html" class="brand-logo center">CHARACTER COLOUR TEST</a>
        </div>
    </nav>

    <div class="container section">
        <div class="row">
            <form id="nameForm" class="col s12">
                <div class="input-field col s12">
                    <input class="name-form-input" type="text" id="nameInput" placeholder="Enter your name" autofocus>
                </div>
                <p class="center">
                    <a href="quiz.html" class="btn blue btn-start" onclick="saveName()">Let's Start</a>
                </p>
            </form>
        </div>
    </div>

    <script>
        function saveName() {
            const nameInput = document.getElementById('nameInput').value;
            localStorage.setItem('name', nameInput);
        }
    </script>

</body>
</html>