This is a questionnaire website for guitar technique evaluation, supporting both video and text assessment modes.

• Two evaluation modes:

  • Video mode: Watch video content and select the most accurate feedback option
  • Text mode: Read scenario descriptions and select the correct feedback from mixed options

• Progress saving: Users can pause and continue the evaluation later, with progress automatically saved in the browser

• Feedback system: Text mode immediately shows whether selections are correct

• Score calculation: Text mode calculates and displays the total score upon completion

• Form submission: Integrated with FormSpree form submission functionality

• Responsive design: User-friendly interface for desktop and mobile devices

1. Open the website homepage and select an evaluation mode (video or text)
2. Follow the instructions to complete each question
3. Fill in your information on the final submission page
4. Click the submit button to send the results

• Pure frontend implementation, no backend server required
• Built with HTML, CSS, and JavaScript
• Uses Bootstrap 5 framework for styling
• Uses FormSpree for form submission processing
• Uses LocalStorage for saving progress locally

To run this website locally, you can use Python's built-in HTTP server:

cd /path/to/project
python -m http.server 8000

Then access the site in your browser at http://localhost:8000

This website can be deployed to any static website hosting service, such as GitHub Pages, Netlify, or Vercel.

• index.html - Main page
• video_questionnaire.html - Video version questionnaire page
• text_questionnaire.html - Text version questionnaire page
• questionnaire.js - JavaScript code for the video questionnaire
• text_questionnaire.js - JavaScript code for the text questionnaire
• questionnaire_data.json - Questionnaire data
• videos/ - Directory for video files
• FORMSPREE_SETUP.md - FormSpree integration guide

questionnaire_data.json file format:

[
  {
    "id": "unique_id",
    "videoUrl": "videos/example.mp4",
    "groundTruth": "This is the correct feedback content...",
    "negative_comments": [
      "Incorrect option 1...",
      "Incorrect option 2...",
      "Incorrect option 3...",
      "Incorrect option 4..."
    ]
  },
  ...
]

In the questionnaire, the groundTruth and negative_comments will be combined and shuffled to create the options shown to users. The system tracks which option is the correct groundTruth and provides feedback accordingly in the text mode.

Form submission uses the FormSpree service. For detailed setup, refer to the FORMSPREE_SETUP.md file.

You can see a live demo of this questionnaire at: https://yourusername.github.io/video-evaluation

• Multiple videos with options to select from
• Progress tracking for respondents
• Mobile-friendly responsive design
• User-friendly interface with clear instructions
• Data collection through FormSpree (or your preferred backend)
• Automatic data persistence using localStorage

1. Fork or clone this repository

2. Enable GitHub Pages

   • Go to your repository settings
   • Scroll down to the GitHub Pages section
   • Select the main branch as the source
   • Click Save

3. Customize the questionnaire data

   • Edit questionnaire_data.json to include your own videos and options
   • Upload your videos to the videos/ directory

4. Update form submission settings (optional)

   • In questionnaire.js, replace the FormSpree endpoint with your own
   • Or implement your preferred method of data collection

If you have existing data in a different format (like the ge.json file), you can use the included Python tools to convert it:

# Convert ge.json to questionnaire format
python convert_to_questionnaire.py --input path/to/ge.json --output questionnaire_data.json --from-ge-json

# Process videos for the questionnaire
python download_videos_for_web.py --source-video path/to/source.mp4 --questionnaire-data questionnaire_data.json

• index.html: The main HTML file for the questionnaire
• questionnaire.js: JavaScript code for handling user interactions and data collection
• questionnaire_data.json: JSON file containing the questionnaire data
• videos/: Directory containing video clips for the questionnaire
• convert_to_questionnaire.py: Python script to convert existing data to questionnaire format
• download_videos_for_web.py: Python script to process videos for web use

You can customize the appearance of the questionnaire by editing the CSS in the <style> section of index.html.

The behavior of the questionnaire can be customized by editing questionnaire.js.

By default, the questionnaire uses a simulated submission process. To collect real data, you can:

1. Set up a FormSpree endpoint and update the endpoint in questionnaire.js
2. Implement your own backend solution
3. Use Google Forms or another survey tool by modifying the submission function

This project is available under the MIT License. See the LICENSE file for more details.