Tarik Tambang IPS.

Description

Tarik Tambang IPS (“Social Studies Tug-of-War”) is a two-player quiz game for junior-high IPS (Social Studies, Grades VII–IX). Team Blue on the left and Team Red on the right answer different multiple-choice questions at the same time on one screen. Every correct answer pulls the rope one step toward that team; the first team to pull the flag five steps to their side wins.

Background

Tarik tambang (tug-of-war) is a classic Indonesian school and Independence Day game. This build turns it into classroom quiz practice: two students — or two groups — share one laptop or projector and compete head to head, so reviewing material feels like a match rather than a worksheet.

Goal

Make Social Studies review competitive and fast-paced, while staying simple enough to open on any classroom computer with no installation or internet connection.

Features

• Simultaneous play on one keyboard: Team Blue answers with A S D F, Team Red with J K L ; — answers can also be clicked or tapped.
• Correct answers turn green and pull the rope one step; wrong answers turn red and lock that team’s panel for 1.5 seconds before a new question appears.
• Pull the rope 5 steps to win, with a winner popup and Main lagi (play again); Ulangi restarts at any time, and every round opens with a 3-2-1 countdown.
• 36-question bank covering history, economics, geography, civics (PPKn), and sociology — drawn at random with no repeats until the bank runs out, different questions for each team, and shuffled answer order.
• Live score per team (correct / wrong) and a step tracker under the field.
• Light and dark mode, prefers-reduced-motion support, visible keyboard focus, and a responsive layout where the panels stack on phones.

Technologies

• Vanilla JavaScript, HTML, and CSS in a single index.html — no framework, library, or web fonts.
• Inline SVG characters and rope, animated with CSS.

Technical Decisions

Everything lives in one offline file so a teacher can copy it to a flash drive and run it on any classroom PC. Splitting the keyboard into two key clusters lets two players compete on a single machine without extra controllers, and the short lockout on a wrong answer stops button-mashing from beating actually knowing the answer. Questions are stored as a simple BANK_SOAL array ([question, correct, wrong1, wrong2, wrong3]) so teachers can swap in their own material.

What I Learned

Designing for two players on one screen meant thinking about fairness: separate question streams, no repeats, and a penalty that rewards accuracy over speed alone. It was also a good exercise in building expressive characters entirely with inline SVG.