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.
 |
| https://iwant2study.org/lookangejss/sypt/fightmatrixwithrestriction.html added some restrictions for teams to not match up |
https://iwant2study.org/lookangejss/sypt/fightmatrixwithrestriction.html
https://iwant2study.org/lookangejss/sypt/fightmatrix.html
https://sg.iwant2study.org/ospsg/index.php/related-sites/1254-fightmatrix
 |
| Singapore Young Physicists' Tournament (SYPT) Team Assignment App. |
https://iwant2study.org/lookangejss/sypt/fightmatrix.html
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:
- Accessibility: Not everyone has Python installed on their computers or knows how to run Python scripts.
- Ease of Use: Users need to install libraries and ensure their Python environment is correctly configured before they can even run the script.
- 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:
- Ensures that no team presents twice in the same round.
- Ensures that teams from the same school don’t face each other twice.
- 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:
javascriptwhile (!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:
javascriptconst 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:weelookang@gmail.com">weelookang@gmail.com</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
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.
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.
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.
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.
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.
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!
Author:
lookang
Email: weelookang@gmail.com
GitHub Repository
No comments:
Post a Comment