- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>JLPT: Self-Assessment Form</title>
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald&display=swap" rel="stylesheet">
- <style>
- :root {
- --color-divbg: #33333d;
- --color-mainbg: #000000;
- }
- * {
- box-sizing: border-box;
- }
- body {
- background-color: var(--color-mainbg);
- color: white;
- }
- p,
- label {
- display: block;
- font-family: 'Lato', sans-serif;
- font-size:1.1rem;
- margin: 0;
- line-height: 1.5em;
- }
- h1,
- h2 {
- font-family: 'Oswald', sans-serif;
- line-height: 0.5em;
- margin-top: 0;
- }
- a:visited {
- color: #e7e7e7;
- }
- button {
- padding: 15px;
- font-family: 'Oswald', sans-serif;
- font-size: inherit;
- border-radius: 5px;
- }
- select,
- #survey-form,
- #submit,
- #name,
- #email,
- #number,
- #further-comments {
- width: 100%;
- }
- #title,
- #description {
- text-align: center;
- }
- #submit:hover {
- transform: scale(1.02);
- }
- .container {
- width: 100%;
- margin: auto;
- background-color: var(--color-divbg);
- border-radius: 10px;
- padding: 20px;
- }
- @media (min-width:500px) {
- .container {
- max-width: 480px;
- }
- }
- @media (min-width: 800px) {
- .container {
- max-width: 750px;
- }
- }
- </style>
- </head>
- <body>
- <h1 id="title">JLPT Study Self-Assessment Form</h1>
- <p id="description">Thank you for helping us improve our service</p>
- <br><br>
- <div class="container">
- <form id="survey-form" action="/submit-form">
- <h2>Personal Information</h2>
- <label for="name" id="name-label">Name</label>
- <input name="name-enter" id="name" type="text" placeholder="Enter your name" required>
- <br><br>
- <!--email-->
- <label for="email" id="email-label">Email</label>
- <input name="email-enter" id="email" type="email" placeholder="Enter your email" required>
- <br><br><br>
- <h2>Language Ability</h2>
- <!--vocab-->
- <label for="number" id="number-label">What is your estimated known vocabulary?</label>
- <input name="number-enter" placeholder="Enter the number" type="number" id="number" min="1" max="100000"><br><br>
- <p>What did you base this number on?</p>
- <label for="based-on-anki">
- <input id="based-on-anki"
- type="radio"
- name="vocab-based-on"
- value="based-on-anki"> Number of Anki cards
- </label>
- <label for="based-on-test">
- <input id="based-on-test"
- type="radio"
- name="vocab-based-on"
- value="based-on-test"> <a href="https://glenn-sun.github.io/japanese-vocab-test/">Vocab Assessment Test</a> (click to take)
- </label>
- <label for="based-on-guess">
- <input id="based-on-guess"
- type="radio"
- name="vocab-based-on"
- value="based-on-guess"> No
- </label>
- <br>
- <!--grammar level-->
- <p>How would you assess your Grammar level before starting with our methods?</p>
- <select name="grammar-before" id="dropdown">
- <option value="below-n5">Below N5</option>
- <option value="n5">N5</option>
- <option value="n4">N4</option>
- <option value="n3">N3</option>
- <option value="n2">N2</option>
- <option value="n1">N1</option>
- <option value="above-n1">Significantly above N1</option>
- </select>
- <br><br>
- <p>How would you assess your Grammar level after starting with our methods?</p>
- <select name="grammar-after" id="dropdown2">
- <option value="below-n5">Below N5</option>
- <option value="n5">N5</option>
- <option value="n4">N4</option>
- <option value="n3">N3</option>
- <option value="n2">N2</option>
- <option value="n1">N1</option>
- <option value="above-n1">Significantly above N1</option>
- </select>
- <br><br>
- <!--checkboxes-->
- <p>What would you like to do more of in the future?<p>
- <label for="grammar">
- <input id="grammar" type="checkbox" value="want-to-do">Study grammar points
- </label>
- <label for="vocab">
- <input id="vocab" type="checkbox" value="want-to-do">More Anki vocab
- </label>
- <label for="immersion">
- <input id="immersion" type="checkbox" value="want-to-do">More immersion
- </label>
- <label for="conversation">
- <input id="conversation" type="checkbox" value="want-to-do">More conversation practice
- </label>
- <label for="nothing">
- <input id="nothing" type="checkbox" value="want-to-do">Nothing really, the current program is good
- </label>
- <br>
- <p>Further Comments</p>
- <textarea id="further-comments" name="further-comments" rows="4" cols="50" maxlength="1000" placeholder="What else is on your mind..."></textarea>
- <br><br><br>
- <h2>Privacy</h2>
- <p>Can we use your responses as testimonials for our service?</p>
- <label for="use-with-name">
- <input id="use-with-name" type="radio" name="testimonial-permission" value="use-with-name"> Yes, with my name
- </label>
- <label for="use-without-name">
- <input id="use-without-name" type="radio" name="testimonial-permission" value="use-without-name"> Yes, anonymously
- </label>
- <label for="dont-use">
- <input id="dont-use" type="radio" name="testimonial-permission" value="dont-use"> No
- </label>
- <br>
- <p>Can we get in contact with you to ask more questions about your experience?</p>
- <label for="can-contact">
- <input id="can-contact" type="radio" name="contact-permission" value="can-contact"> Yes
- </label>
- <label for="cannot-contact">
- <input id="cannot-contact" type="radio" name="contact-permission" value="cannot-contact"> No
- </label>
- <br>
- <button type="submit" id="submit">Submit</button>
- </form>
- </div>
- </body>
- </html>