Student Performance Survey

Rename the School and Course Labels

Open index.html in a text editor. Search for the comment <!-- ── SCHOOL NAME ── to jump directly to the school card, and <!-- ── COURSES ── for the course cards. Each card has three values you can change:

<input type="radio" name="school" value="GP" checked>
<!--                               ^^^
     value  → the code stored in your CSV column (keep it short, no spaces)  -->

<span class="rc-box">
  <strong>GP</strong>          <!-- short code shown on the button -->
  <small>Gabriel Pereira</small> <!-- full name shown below the code -->
</span>

Change all three to match your institution. For example, to use "Lincoln High School" with code LHS:

<input type="radio" name="school" value="LHS" checked>
<span class="rc-box">
  <strong>LHS</strong>
  <small>Lincoln High School</small>
</span>

The same three-part pattern applies to each course card. Find the <!-- ── COURSES ── comment and rename every value, <strong>, and <small> you need.

Important: after renaming, also update the headers array in your Apps Script (Step 2) if you added a new column, and re-deploy the web app (Step 3) to apply the changes.

Add More Course Options

Open index.html and search for the comment <!-- ── COURSES ──. You will see a <div class="radio-card-group"> containing one <label class="radio-card"> block per course. To add a new course, copy the template below and paste it inside that same radio-card-group div, after the last existing course card:

<label class="radio-card">
  <input type="radio" name="course" value="Bio">
  <span class="rc-box">
    <strong>Bio</strong>
    <small>Biology</small>
  </span>
</label>

Replace Bio (the value and <strong>) with your course code, and replace Biology (the <small>) with the full course name. Repeat for as many courses as you need — the card group will wrap automatically.

After adding courses, save the file, commit the change, and push to GitHub so the live site updates.

Remove the About & Setup Guide Tabs Before Going Public

The About & Purpose and Setup Guide tabs are for your reference only. Before deploying the site to respondents, delete the two <button> elements below from the <nav class="tab-nav"> block in index.html:

<button class="tab-btn" data-tab="about">
  <span>ℹ️</span> About &amp; Purpose
</button>
<button class="tab-btn" data-tab="setup">
  <span>⚙️</span> Setup Guide
</button>

After removing those buttons the nav will show only the Survey tab, which is the only thing respondents need to see.

Optional cleanup: you can also delete the two corresponding tab panel <div> blocks — <div id="tab-about" …> and <div id="tab-setup" …> — to reduce page size. The survey will work correctly either way.

Create a Google Spreadsheet

Go to sheets.google.com and create a new blank spreadsheet. Name it anything (e.g., "Student Survey Responses"). Leave all cells empty — the script will add the column headers automatically on the first submission.

Open the Apps Script Editor

Inside your spreadsheet, click Extensions → Apps Script. Delete any placeholder code and paste the script below exactly as shown.

function doPost(e) {
  try {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    var data  = JSON.parse(e.postData.contents);

    var headers = [
      'timestamp', 'school', 'sex', 'age', 'address', 'famsize',
      'Pstatus', 'Medu', 'Fedu', 'Mjob', 'Fjob', 'reason', 'guardian',
      'traveltime', 'studytime', 'failures', 'schoolsup', 'famsup',
      'paid', 'activities', 'nursery', 'higher', 'internet', 'romantic',
      'famrel', 'freetime', 'goout', 'Dalc', 'Walc', 'health',
      'absences', 'G1', 'G2', 'G3', 'course'
    ];

    if (sheet.getLastRow() === 0) {
      sheet.appendRow(headers);
    }

    var row = headers.map(function(h) {
      return h === 'timestamp'
        ? new Date().toISOString()
        : (data[h] !== undefined ? data[h] : '');
    });

    sheet.appendRow(row);

    return ContentService
      .createTextOutput(JSON.stringify({ status: 'success' }))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (err) {
    return ContentService
      .createTextOutput(JSON.stringify({ status: 'error', message: err.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Deploy as a Web App

1. Click Deploy → New deployment
2. Click the gear icon next to "Select type" and choose Web app
3. Set Execute as: Me
4. Set Who has access: Anyone
5. Click Deploy and authorize the requested permissions
6. Copy the Web app URL that appears — it starts with https://script.google.com/macros/s/…

Paste the URL into script.js

Open script.js in this repository. At the very top, find the configuration block and replace the placeholder value with your web app URL:

// ── CONFIGURATION ────────────────────────────────────────────────
const APPS_SCRIPT_URL = 'YOUR_WEB_APP_URL_HERE';
// ─────────────────────────────────────────────────────────────────

Save the file, commit the change, and push to GitHub.

Enable GitHub Pages as your Website

1. Go to your repository on GitHub
2. Click Settings → Pages
3. Under "Source", select GitHub Actions
4. Click Save — your site will be live at https://yourusername.github.io/your-repo/ within a few minutes

Note: in case you don't have a GitHub repository or prefer not to use GitHub Pages, you can also host this site on any static hosting service (e.g., Netlify, Vercel) by uploading the files (html, css, js) and configuring the form submission URL as described in step 4.

Export Collected Data as CSV

Open your Google Spreadsheet at any time and click File → Download → Comma Separated Values (.csv). The exported file will match the Student Performance Dataset schema exactly and is ready for analysis in R or Python without any additional transformation.