Breadcrumbs

Building the Singapore Young Physicists' Tournament (SYPT) Team Assignment Web App

 

V4: https://iwant2study.org/lookangejss/sypt/fightmatrixwithrestrictionwithcolorwithenhancements.html after qwen2.5-coder:32b and gpto1-preview

V3: https://iwant2study.org/lookangejss/sypt/fightmatrixwithrestrictionwithcolor.html

https://iwant2study.org/lookangejss/sypt/fightmatrixwithrestriction.html

https://iwant2study.org/lookangejss/sypt/fightmatrix.html

 

 https://iwant2study.org/lookangejss/sypt/fightmatrixwithrestriction.html
added some restrictions for teams to not match up

 

Building the Singapore Young Physicists' Tournament (SYPT) Team Assignment Web App

In this blog post, I'll explain the process of building the Singapore Young Physicists' Tournament (SYPT) Team Assignment App. This app was originally written in Python, but we've innovatively translated it into a web-based application using HTML and JavaScript, making it more accessible and easier to run for users without needing to install Python or any additional software.

The app allows you to input teams and rooms, assign presenters and opponents for each round, and download the assignments as CSV or ZIP files for easy sharing and record-keeping. The user interface is intuitive, and all functionalities are directly embedded within a webpage.

Why Move from Python to a Web App?

The original solution was developed as a Python script, which worked well for those familiar with running Python locally. However, there are several challenges associated with using Python in this way:

  1. Accessibility: Not everyone has Python installed on their computers or knows how to run Python scripts.
  2. Ease of Use: Users need to install libraries and ensure their Python environment is correctly configured before they can even run the script.
  3. Maintenance: Supporting different environments (Windows, macOS, Linux) can be cumbersome due to differences in how Python handles packages and dependencies.

By converting this solution to a web-based application, we address these challenges head-on. Now, the only thing users need is a web browser!

Key Features of the SYPT Web App

Input Fields for Teams and Rooms

The app starts with two simple input fields: one for the team list and another for the room list. These fields are pre-populated with sample values, but you can modify them to reflect the actual teams and rooms used for your event.

html
<label for="team_list">Team List (separate by commas):</label><br> <textarea id="team_list">RI1, RGS, NUSH1, NUSH2, NJC1, NJC2, HCI1, HCI2, RVHS1, TJC1</textarea><br><br> <label for="room_list">Room List (separate by commas):</label><br> <textarea id="room_list">A, B, C, D, E</textarea><br><br>

The user-friendly interface allows anyone to input the teams and rooms, making the app much more accessible than the original Python script.

Assignment Logic

Once you've entered the teams and rooms, the app assigns presenters and opponents for each round using the same logic as the original Python script. The JavaScript behind the scenes mimics the Python code’s logic and performs the following:

  1. Ensures that no team presents twice in the same round.
  2. Ensures that teams from the same school don’t face each other twice.
  3. Tries up to 500 times (just like the Python version) to find valid matchups.

Here’s an example of how the assignment works in the app:

javascript
while (!proceed && attempts < MAX_ATTEMPT) { // Initialize assignment matrix and presentation counts assignment_matrix = Array.from({ length: team_list.length }, () => Array(4).fill(null)); team_p_count = Array(team_list.length).fill(0); room_matrix = Array.from({ length: room_list.length }, () => Array(8).fill(null)); school_matrix = Array.from({ length: team_list.length }, () => Array(team_list.length).fill(null)); // (rest of the logic...) }

This logic ensures that matchups are randomized and valid based on the SYPT tournament rules.

Viewing Results and Downloading CSV Files

After running the assignment logic, the app displays the results directly in the browser:

  • Assignment Matrix: Shows which teams are presenting and opposing in each round.
  • Room Matrix: Displays the teams in each room for each round.
  • Transposed Room Matrix: A view of the room matrix with rounds as rows and rooms as columns.
  • School Matrix: Helps verify the assignments, showing which teams are presenting and opposing, along with rounds.

Users can also download these matrices as individual CSV files or package them all into a single ZIP file for convenience:

javascript
const downloadButton = document.createElement('button'); downloadButton.id = 'downloadButton'; downloadButton.textContent = 'Download Assignment Matrix CSV'; downloadButton.onclick = downloadCSV; const downloadAllButton = document.createElement('button'); downloadAllButton.id = 'downloadAllButton'; downloadAllButton.textContent = 'Download All CSVs as ZIP'; downloadAllButton.onclick = downloadAllCSVsAsZip;

This functionality, enabled by the JSZip library, adds a layer of convenience that wasn’t present in the original Python version.

Google Analytics Integration

Another great feature of the web-based version is the inclusion of Google Analytics. With a few lines of code, I integrated analytics to track how users are interacting with the web app. This is particularly useful for monitoring usage patterns and improving the app over time.

html
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-S9EWRY1CPJ"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S9EWRY1CPJ'); </script>

Source Code Link

At the bottom of the page, users are provided with a link to view the original Python code on GitHub. This maintains transparency and allows anyone to view and contribute to the project.

html
<div class="footer"> This web app is created by <a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</a> based on original Python code by nic_wong. You can view the source code on <a href="https://github.com/lookang/SYPTPython" target="_blank">GitHub</a>. </div>

This open-source approach encourages collaboration and helps other educators or developers enhance the app.

Why a Web App is Innovative

  1. Platform Independence: Unlike the Python script, which requires a specific environment (Python interpreter, libraries, etc.), the web app can be run on any device with a web browser. This includes mobile phones, tablets, and desktops, making it far more accessible.

  2. No Installation Required: One of the major benefits of a web app is that users do not need to install or set up anything. The app works as soon as they visit the page, reducing technical barriers.

  3. Real-Time Interactivity: The web app provides instant feedback. When users input team lists and assign rooms, the results are calculated in real-time and displayed immediately on the same page.

  4. Shareable: Users can easily share the app by sending the link. Anyone with the link can use the app without needing to install Python or download additional files.

  5. Data Export: The ability to download assignments as CSV files or a ZIP archive adds to the app's usability, making it easy for users to export data for further analysis or record-keeping.

  6. User Engagement: The integration of Google Analytics allows tracking user behavior, which helps improve the user experience by understanding how people use the app.

Conclusion

By transitioning the Singapore Young Physicists' Tournament (SYPT) Team Assignment App from Python to a fully functional web-based solution, we’ve made it significantly more accessible and user-friendly. The web app preserves the original logic of the Python code while adding new layers of convenience, such as real-time feedback, platform independence, and easy data export.

This project exemplifies the power of web technologies in making tools available to a broader audience, all while maintaining the complexity and functionality of the original Python implementation.

Feel free to try the web app yourself and check out the source code on GitHub!

 

Reference:

  1. https://weelookang.blogspot.com/2024/09/building-singapore-young-physicists.html
  2. https://chatgpt.com/share/66f7eb50-22c4-8008-a224-1c24d676ef54
    https://chatgpt.com/c/66f1ff47-262c-8008-954b-a20f040e61fa
  3. https://chatgpt.com/c/6706212b-873c-8008-a0b3-c68778674ed2

Author:
lookang
Email: This email address is being protected from spambots. You need JavaScript enabled to view it.
GitHub Repository

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)
Details
Category: Related Sites
Hits: 350