TypeScript Tutorial: Creating a Simple Interactive Web-Based Survey App

Written by

learnmodernjavascript

in

Surveys are a powerful tool for gathering feedback, conducting research, and understanding your audience. In the digital age, web-based surveys offer a convenient and efficient way to collect data from a wide range of users. This tutorial will guide you through building a simple, interactive web-based survey application using TypeScript, a superset of JavaScript that adds static typing. We’ll cover the fundamental concepts, from setting up your development environment to handling user input and displaying results. By the end of this tutorial, you’ll have a functional survey app and a solid understanding of how to leverage TypeScript for front-end development.

Why TypeScript?

TypeScript brings several advantages to the table, especially when building complex applications. Here’s why you should consider using TypeScript:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process, reducing the likelihood of runtime bugs.
  • Code Maintainability: Types make your code easier to understand and maintain, especially in large projects.
  • Improved Developer Experience: TypeScript provides better code completion, refactoring, and navigation in your IDE.
  • Enhanced Readability: Types act as self-documentation, making your code more readable and understandable.

Setting Up Your Development Environment

Before we dive into the code, let’s set up your development environment. You’ll need the following:

  • Node.js and npm (Node Package Manager): Install Node.js from nodejs.org. npm comes bundled with Node.js.
  • TypeScript Compiler: Install the TypeScript compiler globally using npm: npm install -g typescript
  • Text Editor or IDE: Choose your preferred text editor or IDE (e.g., Visual Studio Code, Sublime Text, WebStorm).

Once you have these installed, create a new project directory and navigate into it using your terminal. Initialize a new npm project using the following command:

npm init -y

This will create a package.json file in your project directory. Next, create a tsconfig.json file. This file configures the TypeScript compiler. You can generate a basic tsconfig.json file using the following command:

tsc --init

This command creates a tsconfig.json file with default settings. You can customize these settings to fit your project’s needs. For example, you might want to specify the output directory for your compiled JavaScript files (e.g., "outDir": "./dist"). You can also change the target ECMAScript version (e.g., "target": "es5" or "target": "es6"). In this tutorial, we will stick with the default settings for simplicity.

Project Structure

Let’s establish a basic project structure. We’ll have the following files and directories:

  • src/: This directory will contain our TypeScript source files.
  • src/index.ts: The main entry point of our application.
  • dist/: This directory will hold the compiled JavaScript files (generated by the TypeScript compiler).
  • index.html: The HTML file that will load and display our survey.
  • package.json: Contains project metadata and dependencies.
  • tsconfig.json: TypeScript compiler configuration.

Writing the Survey App in TypeScript

Now, let’s write the code for our survey application. Open your text editor or IDE and create the following files in the src/ directory:

src/index.ts:


// Define a type for a survey question
interface Question {
  text: string;
  options: string[];
  type: 'radio' | 'text'; // Question types: radio buttons or text input
}

// Define the survey questions
const questions: Question[] = [
  {
    text: "How satisfied are you with our service?",
    options: ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied", "Very Dissatisfied"],
    type: 'radio',
  },
  {
    text: "What could we improve?",
    options: [], // No options for a text input
    type: 'text',
  },
  {
    text: "How likely are you to recommend us?",
    options: ["Very Likely", "Likely", "Neutral", "Unlikely", "Very Unlikely"],
    type: 'radio',
  },
];

// Function to render a question
function renderQuestion(question: Question, index: number): string {
  let html = `<div class="question"><p>${index + 1}. ${question.text}</p>`;

  if (question.type === 'radio') {
    question.options.forEach((option) => {
      html += `<label><input type="radio" name="question-${index}" value="${option}"> ${option} </label><br>`;
    });
  } else if (question.type === 'text') {
    html += `<input type="text" name="question-${index}"><br>`;
  }

  html += '</div>';
  return html;
}

// Function to render the survey
function renderSurvey(): void {
  const surveyContainer = document.getElementById('survey-container');
  if (!surveyContainer) {
    console.error('Survey container not found.');
    return;
  }

  let surveyHTML = '';
  questions.forEach((question, index) => {
    surveyHTML += renderQuestion(question, index);
  });

  surveyHTML += '<button id="submit-button">Submit</button>';
  surveyContainer.innerHTML = surveyHTML;

  // Add event listener for the submit button
  const submitButton = document.getElementById('submit-button');
  if (submitButton) {
    submitButton.addEventListener('click', handleSubmit);
  }
}

// Function to handle form submission
function handleSubmit(): void {
  const results: { [key: string]: string } = {};

  questions.forEach((_question, index) => {
    const questionName = `question-${index}`;
    const selectedInput = document.querySelector(`input[name="${questionName}"]:checked`) as HTMLInputElement | null;
    const textInput = document.querySelector(`input[name="${questionName}"]`) as HTMLInputElement | null;

    if (selectedInput) {
      results[questionName] = selectedInput.value;
    } else if (textInput) {
      results[questionName] = textInput.value;
    }
  });

  // Display the results (for now, just log them to the console)
  console.log('Survey Results:', results);
  alert('Thank you for your feedback!'); // Basic confirmation
}

// Initial rendering of the survey
document.addEventListener('DOMContentLoaded', () => {
  renderSurvey();
});

index.html:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Survey</title>
  <style>
    .question {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="survey-container"></div>
  <script src="dist/index.js"></script>
</body>
</html>

Now, let’s break down the code:

  • Interfaces and Data Structures: We define a Question interface to represent the structure of a survey question. This includes the question text, options (for radio button questions), and the question type ('radio' or 'text').
  • Question Data: The questions array holds the data for each question in the survey. It’s an array of Question objects.
  • renderQuestion Function: This function takes a Question object and its index as input and generates the HTML for a single question. It dynamically creates radio buttons or a text input field based on the question type.
  • renderSurvey Function: This function renders the entire survey. It iterates through the questions array, calls renderQuestion for each question, and appends the generated HTML to the survey container in the index.html file. It also adds a submit button and attaches an event listener to it.
  • handleSubmit Function: This function is called when the submit button is clicked. It gathers the user’s responses from the form, stores them in a results object, and logs the results to the console. It also displays an alert to the user confirming the submission.
  • Event Listener: The DOMContentLoaded event listener ensures that the renderSurvey function is called after the HTML document has been fully loaded.

Compiling and Running the Application

With the code in place, let’s compile the TypeScript code into JavaScript. Open your terminal and navigate to your project directory. Run the following command:

tsc

This command will use the TypeScript compiler to transpile the src/index.ts file into a dist/index.js file. Now, open the index.html file in your web browser. You should see the survey questions displayed. You can interact with the survey, and when you click the submit button, the results will be logged to your browser’s console.

Adding Styling

The survey currently lacks any styling. Let’s add some basic CSS to improve its appearance. Add the following style block within the <head> section of your index.html file:


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Survey</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }

    .question {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>

Refresh your browser, and the survey should now have a more visually appealing layout.

Handling Different Question Types

Our current survey supports two question types: radio buttons and text input. The renderQuestion function uses conditional logic to render the appropriate HTML based on the question.type property. You can easily extend this to support other question types, such as checkboxes or select dropdowns. For example, to add a checkbox question type, you would modify the Question interface and the renderQuestion function:

Modify the Question interface:


interface Question {
  text: string;
  options: string[];
  type: 'radio' | 'text' | 'checkbox'; // Add 'checkbox'
}

Modify the renderQuestion function:


function renderQuestion(question: Question, index: number): string {
  let html = `<div class="question"><p>${index + 1}. ${question.text}</p>`;

  if (question.type === 'radio') {
    question.options.forEach((option) => {
      html += `<label><input type="radio" name="question-${index}" value="${option}"> ${option} </label><br>`;
    });
  } else if (question.type === 'text') {
    html += `<input type="text" name="question-${index}"><br>`;
  } else if (question.type === 'checkbox') {
    question.options.forEach((option) => {
      html += `<label><input type="checkbox" name="question-${index}" value="${option}"> ${option} </label><br>`;
    });
  }

  html += '</div>';
  return html;
}

You would also need to update the questions array in index.ts to include a question of the checkbox type. Remember to recompile your TypeScript code after making these changes (tsc).

Error Handling and Validation

Our current implementation lacks error handling and input validation. In a real-world application, you would want to implement these features to ensure data quality and provide a better user experience. Here are some common error-handling and validation techniques:

  • Required Fields: Make certain questions are required before submission. You can add a required attribute to the input elements in the renderQuestion function and validate them in the handleSubmit function.
  • Input Validation: Validate user input to ensure it meets specific criteria (e.g., email format, numeric ranges, text length). Use regular expressions or built-in validation methods.
  • Error Messages: Display clear and informative error messages to the user when validation fails.
  • Try-Catch Blocks: Wrap potentially error-prone code (e.g., network requests) in try-catch blocks to handle exceptions gracefully.

Example: Implementing Required Fields

Modify the renderQuestion function to add the required attribute to the text input:


function renderQuestion(question: Question, index: number): string {
  let html = `<div class="question"><p>${index + 1}. ${question.text}</p>`;

  if (question.type === 'radio') {
    question.options.forEach((option) => {
      html += `<label><input type="radio" name="question-${index}" value="${option}"> ${option} </label><br>`;
    });
  } else if (question.type === 'text') {
    html += `<input type="text" name="question-${index}" required><br>`; // Add required attribute
  }

  html += '</div>';
  return html;
}

Modify the handleSubmit function to check if the required fields are filled before processing the results:


function handleSubmit(): void {
  let isValid = true;
  questions.forEach((_question, index) => {
    const questionName = `question-${index}`;
    const selectedInput = document.querySelector(`input[name="${questionName}"]:checked`) as HTMLInputElement | null;
    const textInput = document.querySelector(`input[name="${questionName}"]`) as HTMLInputElement | null;

    if (textInput && textInput.required && !textInput.value) {
      isValid = false;
      alert(`Please fill out question ${index + 1}.`);
    }
  });

  if (!isValid) {
    return; // Stop further processing if validation fails
  }

  const results: { [key: string]: string } = {};

  questions.forEach((_question, index) => {
    const questionName = `question-${index}`;
    const selectedInput = document.querySelector(`input[name="${questionName}"]:checked`) as HTMLInputElement | null;
    const textInput = document.querySelector(`input[name="${questionName}"]`) as HTMLInputElement | null;

    if (selectedInput) {
      results[questionName] = selectedInput.value;
    } else if (textInput) {
      results[questionName] = textInput.value;
    }
  });

  // Display the results (for now, just log them to the console)
  console.log('Survey Results:', results);
  alert('Thank you for your feedback!'); // Basic confirmation
}

Storing and Displaying Results

Currently, the survey results are only logged to the console. In a real-world application, you would want to store the results and display them in a meaningful way. Here are some options:

  • Local Storage: Store the results in the browser’s local storage. This is suitable for simple surveys and small datasets.
  • Server-Side Database: Send the results to a server-side database (e.g., MySQL, PostgreSQL, MongoDB) using AJAX or the Fetch API. This is the preferred method for more complex surveys and larger datasets.
  • Display Results: Display the results on a results page or within the survey itself. You can create charts, graphs, or summary tables to visualize the data.

Example: Storing results in local storage

Modify the handleSubmit function to save the results to local storage:


function handleSubmit(): void {
  let isValid = true;
  questions.forEach((_question, index) => {
    const questionName = `question-${index}`;
    const selectedInput = document.querySelector(`input[name="${questionName}"]:checked`) as HTMLInputElement | null;
    const textInput = document.querySelector(`input[name="${questionName}"]`) as HTMLInputElement | null;

    if (textInput && textInput.required && !textInput.value) {
      isValid = false;
      alert(`Please fill out question ${index + 1}.`);
    }
  });

  if (!isValid) {
    return; // Stop further processing if validation fails
  }

  const results: { [key: string]: string } = {};

  questions.forEach((_question, index) => {
    const questionName = `question-${index}`;
    const selectedInput = document.querySelector(`input[name="${questionName}"]:checked`) as HTMLInputElement | null;
    const textInput = document.querySelector(`input[name="${questionName}"]`) as HTMLInputElement | null;

    if (selectedInput) {
      results[questionName] = selectedInput.value;
    } else if (textInput) {
      results[questionName] = textInput.value;
    }
  });

  // Store the results in local storage
  localStorage.setItem('surveyResults', JSON.stringify(results));

  // Display the results (for now, just log them to the console)
  console.log('Survey Results:', results);
  alert('Thank you for your feedback!'); // Basic confirmation
}

To retrieve the results, you can use localStorage.getItem('surveyResults'). Remember that local storage stores data as strings, so you’ll need to use JSON.parse() to convert the string back into a JavaScript object.

Advanced Features

This tutorial provides a basic framework for a web-based survey app. You can extend it with several advanced features:

  • Dynamic Questions: Load questions from a JSON file or a database, allowing you to easily update the survey content.
  • Conditional Logic: Show or hide questions based on the user’s previous responses (e.g., show a follow-up question only if the user answers “Yes”).
  • Progress Indicators: Display a progress bar to show the user their progress through the survey.
  • User Authentication: Implement user authentication to track individual responses and prevent duplicate submissions.
  • Data Visualization: Use charting libraries (e.g., Chart.js, D3.js) to create interactive charts and graphs to visualize the survey results.
  • Accessibility: Ensure your survey is accessible to users with disabilities by using ARIA attributes, providing alternative text for images, and ensuring proper keyboard navigation.

Common Mistakes and How to Fix Them

When building a web-based survey app, you might encounter common mistakes. Here are some of them and how to fix them:

  • Incorrect TypeScript Compilation: If you see errors during compilation, double-check your tsconfig.json file and ensure you have installed the TypeScript compiler correctly. Examine the error messages carefully; they often pinpoint the exact line of code causing the problem.
  • Incorrect HTML Structure: Ensure your HTML structure is valid and that you have correctly placed the <script> tag before the closing </body> tag to ensure that the JavaScript code runs after the HTML has been loaded.
  • Incorrect Event Handling: Ensure that your event listeners are correctly attached and that the event handler functions are defined properly. Use the browser’s developer tools (console) to debug event-related issues.
  • Type Errors: TypeScript’s type checking can help you catch errors early. If you see type errors, carefully review your code to ensure that the data types are consistent and that you are using the correct methods and properties. Use type annotations to help the TypeScript compiler to catch more errors.
  • DOM Manipulation Errors: When manipulating the DOM, make sure you’re selecting the correct elements using document.getElementById, document.querySelector, or other methods. Double-check your element IDs and class names.
  • Asynchronous Operations: If you’re using asynchronous operations (e.g., fetching data from a server), make sure you handle the asynchronous nature of these operations correctly using async/await or Promises.

Key Takeaways

This tutorial has covered the basics of building a web-based survey application using TypeScript. You’ve learned about:

  • Setting up a TypeScript development environment.
  • Defining data structures and interfaces.
  • Rendering dynamic HTML elements based on data.
  • Handling user input and form submissions.
  • Adding basic styling.
  • Implementing error handling and validation.
  • Storing and displaying survey results (using local storage as an example).
  • Extending the application with advanced features.

FAQ

Here are some frequently asked questions about building a web-based survey application with TypeScript:

  1. Can I use a framework like React or Angular with TypeScript? Yes, TypeScript works very well with popular front-end frameworks like React, Angular, and Vue.js. These frameworks provide excellent support for TypeScript, allowing you to take advantage of its type safety and other benefits.
  2. How do I deploy my survey application? You can deploy your survey application to a web server (e.g., Apache, Nginx) or a cloud platform (e.g., AWS, Google Cloud, Azure). You’ll need to upload the compiled JavaScript files (dist/index.js), the HTML file (index.html), and any associated assets (e.g., CSS, images) to the server.
  3. How do I handle user authentication? Implementing user authentication typically involves using a server-side authentication system (e.g., using a database to store user credentials) and securing your API endpoints. You can use libraries or frameworks like Passport.js (for Node.js) or Firebase Authentication to simplify the process.
  4. What is the best way to store survey results? The best way to store survey results depends on the complexity of your survey and the volume of data. For simple surveys, local storage might suffice. For more complex surveys, a server-side database (e.g., MySQL, PostgreSQL, MongoDB) is recommended.
  5. How can I improve the performance of my survey application? To improve performance, consider optimizing your code (e.g., minimizing DOM manipulations), using code splitting to load only the necessary code, and caching data. Also, ensure that your images are optimized for web use.

Building a survey application in TypeScript provides a robust and maintainable solution for collecting valuable feedback. By implementing the principles and techniques outlined in this tutorial, you can create a powerful and user-friendly survey experience. Remember to prioritize type safety, error handling, and user experience to deliver a high-quality application. As you become more familiar with TypeScript and the concepts discussed in this tutorial, you can explore more advanced features and techniques to create even more sophisticated and engaging survey applications. The ability to tailor the survey to your specific needs, gathering crucial data in a structured and efficient manner, is a valuable asset in many contexts, from market research to educational assessments. The combination of TypeScript’s strengths and the adaptability of web applications makes this an ideal pathway for various projects.

More posts