---

---

🧠 C Programming Series Quiz, Feedback, & Leaderboard Application

This repository houses the C Programming Series web application, an interactive platform developed by The Coders Club. As the Secretary of The Coders Club, Mangayarkarasi College of Engineering, I embarked on this project to explore VibeCoding – a new approach to development. This entire application was built collaboratively using Microsoft Copilot and Google Gemini. You can view a live demo of the original website, though please note it might not always reflect the absolute latest updates as we may have updated our live projects.

---

✨ Features

• C Programming Series Content (Homepage - index.html):

  • Structured Weekly Content: Navigate through C programming content organized by weeks.
  • Daily Learning Modules: Each week breaks down into daily sections (Monday, Tuesday, etc.), offering focused learning.
  • Dynamic Content Access: Weeks and individual days can be configured to display content as blurred and jumbled text if they are disabled (e.g., "Coming Soon" or "Access Closed"). This provides a clear visual cue while allowing users to still click the navigation buttons.
  • Responsive Tab Navigation: Week and day selection buttons are fully responsive, gracefully adapting to different screen sizes and maintaining a consistent, sleek appearance on both desktop and mobile devices.
  • Code Snippets & Examples: Content includes clearly formatted code blocks for hands-on learning.

• Interactive Quiz Forms:

  • Weekly Quiz (quiz.html): For regular, weekly assessments.
  • Final Quiz (finalquiz.html): For a comprehensive final assessment.
  • Both quiz forms allow users to answer multiple-choice, multi-select, and open-ended questions.
  • No Hint Text: All text input fields and text areas (including Name and Email) are intentionally left blank, providing no hints or placeholder text.
  • Each quiz can be enabled or disabled via a simple JavaScript variable for active control.
  • "Quiz Closed" Experience: When disabled, the quiz section's questions are jumbled and blurred, and input fields are inaccessible, providing clear visual feedback that it's currently unavailable.
  • Anti-Copying Measures: Basic CSS to prevent text selection in certain quiz elements when disabled.

• Feedback Form (feedback.html):

  • Gathers valuable insights from users with various input types.
  • Can also be enabled or disabled for active control.

• Dynamic Leaderboard Display (leaderboard.html):

  • Weekly Tabs: View quiz results categorized by different weeks, with responsive navigation buttons that adapt to screen size.
  • Department-wise Filtering: Within each week, results can be filtered by specific departments (e.g., CSE 2nd Year, CSE (AI/ML) 2nd Year, CSE 3rd Year), also with responsive buttons.
  • Clearly shows S.No., Name, and Score.
  • Highlights disqualified rows for easy identification.

• Submission Success Animation: A pleasant tick mark animation appears upon successful form submission for both quiz and feedback.

• Google Sheets Integration: Submits quiz and feedback form data directly to Google Sheets using a Google Apps Script web app (requires user setup).

---

🚀 Setup & Usage

1. Google Apps Script Setup (Backend for Data Submission)

Both the quiz and feedback forms submit data to a Google Sheet via a deployed Google Apps Script web app. You'll need to set this up first for submissions to work.

For each form (Weekly Quiz, Final Quiz, and Feedback):

1. Create a New Google Sheet: Go to Google Sheets and create a new blank spreadsheet.

2. Rename the First Tab: Rename the first tab (e.g., Sheet1) to match the expected column names for the respective form.

   • For Quiz Forms (quiz.html and finalquiz.html): The first row of your Google Sheet should contain these column headers: Name, Email, Department, Year, Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8, Question9, Question10, Question11, Question12, Question13, Question14, Question15.
   • For Feedback Form (feedback.html): The first row of your Google Sheet should contain these column headers: Name, Email, Department, Year, SatisfactionRating, LikedMost, Suggestions, Recommend, OtherComments.

3. Open Apps Script: In your Google Sheet, go to Extensions > Apps Script.

4. Paste the Script: Delete any existing code (Code.gs) and paste the following Google Apps Script code. This is a generic script that will work for all forms, assuming your column headers match.

   function doPost(e) {
     var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
     var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
     var rowData = [];
   
     // Add a timestamp as the first column (optional, but good practice)
     rowData.push(new Date());
   
     for (var i = 0; i < headers.length; i++) {
       var header = headers[i];
       if (header.toLowerCase() === 'timestamp') {
         // Skip if timestamp is already added
         continue;
       }
       var value = e.parameter[header];
       rowData.push(value || ''); // Add value, or empty string if not present
     }
   
     sheet.appendRow(rowData);
   
     return ContentService.createTextOutput(JSON.stringify({ "result": "success", "row": sheet.getLastRow() })).setMimeType(ContentService.MimeType.JSON);
   }

5. Deploy as Web App:

   • Save the script (File > Save project).
   • Click Deploy > New deployment.
   • For "Select type," choose Web app.
   • For "Execute as," choose Me.
   • For "Who has access," choose Anyone.
   • Click Deploy.
   • Copy the Web app URL. This is crucial!

2. Frontend File Setup

1. Download/Clone: Get all the HTML, CSS (styles.css), and image files (TCC.png, MCE_tab.png, IG.png, LINKEDLN.png, YT.png, WP.svg) from this repository.
2. Update Script URLs:
   • Open quiz.html (for the Weekly Quiz) in a text editor.
   • Find the line: const scriptUrl = 'YOUR_GOOGLE_APPS_SCRIPT_WEB_APP_URL_HERE';
   • Replace the placeholder URL with the Web app URL you copied from your Google Apps Script deployment for the Weekly Quiz's Google Sheet.
   • Do the same for finalquiz.html, replacing its scriptUrl with the Web app URL for the Final Quiz's Google Sheet.
   • Do the same for feedback.html, replacing its scriptUrl with the Web app URL for the Feedback form's Google Sheet.

3. Dynamic Form & Content Status Control

• For the C Programming Series Content (index.html):
  • Open index.html.
  • Locate the JavaScript section that defines disabledWeekId and disabledDays.
  • Adjust let disabledWeekId = ''; to specify a week ID (e.g., 'week4') to disable an entire week's content.
  • Modify const disabledDays = {}; to include specific days within an enabled week (e.g., {'week1': ['tuesday', 'thursday']}) to show those day's content as blurred and jumbled.
• For the Weekly Quiz (quiz.html):
  • Open quiz.html.
  • Find the line: const linkControlStatus = "disable";
  • Change "disable" to "enable" to make the weekly quiz form active.
• For the Final Quiz (finalquiz.html):
  • Open finalquiz.html.
  • Find the line: const linkControlStatus = "disable";
  • Change "disable" to "enable" to make the final quiz form active.
• For the Feedback form (feedback.html):
  • Open feedback.html.
  • Find the line: const formControlStatus = "disable";
  • Change "disable" to "enable" to make the feedback form active.

4. Leaderboard Data Management

The leaderboard data in leaderboard.html is currently static HTML. This means that to update the quiz scores, you will need to manually edit the leaderboard.html file.

• To update scores for a specific week, find the div with the corresponding id (e.g., <div id="week1" ...>).
• Within that, locate the specific department's div (e.g., <div id="cse2_week1" ...>).
• Edit the <table> rows (<tr><td>...</td></tr>) to reflect the latest rankings and scores.
• Follow the same process for other weeks and departments as needed.

---

📊 View Live Data

You can view the data submitted through the quiz and feedback forms directly in these Google Sheets (these are publicly viewable links):

• C Programming Series - Quiz Data: https://docs.google.com/spreadsheets/d/1O4NlEm2V8NRINTL03K8Ff_aZrC7zbEis6Lfcqkx6H1s/edit?gid=0#gid=0
• C Programming Series - Final Quiz Data: https://docs.google.com/spreadsheets/d/1lgn23TAQXEA8adGqhW8flpyauo57SLAs7MyAM1zBsGA/edit?usp=sharing
• C Programming Series - Feedback Data: https://docs.google.com/spreadsheets/d/1YvdX7s4c6OOS6B-QcMmkf2hZHi2HfGAIn2LuQ5_R0iY/edit?gid=0#gid=0

---

🌐 Live Demo

Experience the C Programming Series application live here:

• Original Project Website: https://thecodersclub-mce.github.io/c-programming-series/

---

☁️ Google Apps Script Backend Code (For Reference)

The backend logic for handling form submissions and integrating with Google Sheets is powered by a Google Apps Script web app. The single script file included here is common to both the Quiz and Feedback forms, handling data for both based on the form's setup.

• View Apps Script Code: google-apps-script-handler.js

---

💻 Local Development

You can open index.html, quiz.html, finalquiz.html, feedback.html, and leaderboard.html directly in your web browser to test them. Remember that for form submissions to work, you must have completed the Google Apps Script setup and updated the scriptUrl in quiz.html, finalquiz.html, and feedback.html.

---

📄 File Structure

• index.html: The homepage featuring the C Programming Series weekly and daily content.
• quiz.html: The interactive Weekly Quiz application page.
• finalquiz.html: The interactive Final Quiz application page.
• feedback.html: The Feedback form page.
• leaderboard.html: Displays the quiz results with weekly and department-wise filtering.
• styles.css: Contains the common CSS styling for all pages.
• TCC.png, MCE_tab.png, IG.png, LINKEDLN.png, YT.png, WP.svg: Image assets used throughout the pages.
• google-apps-script-handler.js: The Google Apps Script code for backend data handling.

---

🤝 Contributing

Feel free to fork this repository, open issues, or submit pull requests.

---

📝 License

This project is open-sourced under the MIT License.

---

📧 Contact

For any questions or suggestions, please contact The Coders Club.

---