Yakin, mau tutup form ini? Kamu ga bisa maen game loh!
2026-03-08 18:55
Diff
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="author" content="Ruangguru Tech Team" />
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta name="description" content="Yuk nonton game show Indonesia Clash of Champions Season 2 2025 di aplikasi Ruangguru. Menangkan hadiahnya & klaim diskon belajar sekarang!" />
<title>Clash of Champions Season 2 2025: Jadwal, Episode & Sinopsis</title>
<link rel="shortcut icon" href="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/favicon60x60-3.png" />
<meta property="og:description" content="Yuk nonton game show Indonesia Clash of Champions Season 2 2025 di aplikasi Ruangguru. Menangkan hadiahnya & klaim diskon belajar sekarang!" />
<meta property="og:title" content="Clash of Champions Season 2 2025: Jadwal, Episode & Sinopsis" />
<meta name="twitter:description" content="Yuk nonton game show Indonesia Clash of Champions Season 2 2025 di aplikasi Ruangguru. Menangkan hadiahnya & klaim diskon belajar sekarang!" />
<meta name="twitter:title" content="Clash of Champions Season 2 2025: Jadwal, Episode & Sinopsis" />
<link rel="canonical" href="https://www.ruangguru.com/clash-of-champions/game" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="VJAn1g6wmtTZPpTXh-B4xoSFEkUi5jcV74xQSr6jnOM" />
<meta property="og:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="350" />
<meta name="twitter:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta property="og:url" content="https://www.ruangguru.com/event/clash-of-champions" />
<meta name="twitter:card" content="summary_large_image" />
<meta http-equiv="Content-Language" content="id" />
<meta name="robots" content="noindex, nofollow" />
<link
rel="stylesheet"
href="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/live.skillacademy.com/hs-fs/hub/2828691/hub_generated/template_assets/90363693367/1667460957340/slick1.9.0-slick-theme.min.css"
/>
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/me.ruangguru.com/hs-fs/hub/2828691/hub_generated/module_assets/39227318886/1661845607410/module_39227318886_header-homepage-ruangguru-2021.min.css"
/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Nunito:wght@100;200;300;400;500;600;700&family=Source+Sans+Pro:wght@100;200;300;400;500;600;700&display=swap');
.page-center {
float: none !important;
margin: 0 auto !important;
width: 100% !important;
}
body {
margin: 0;
background: #011124;
color: #fff;
-ms-overflow-style: none;
position: relative;
height: 100%;
}
html {
scrollbar-width: none;
}
a,
a:hover,
a:visited {
text-decoration: none !important;
color: inherit;
}
.display-none {
display: none !important;
}
.cta {
border-radius: var(--size-radius-rad-full, 9999px);
background: var(--prop-action-primary-primary-default, #f26d0f);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
border: 1px solid #f26d0f;
padding: 0.75rem 2.5rem;
display: flex;
justify-content: center;
}
.secondary-cta {
display: flex;
height: 44px;
padding: 0.3rem 2.5rem;
justify-content: center;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--prop-action-secondary-secondary-default-border, #cfd3db);
background: var(--prop-action-secondary-secondary-default, #fff);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
cursor: pointer;
color: var(--color-text-text-ink, #2c313a);
}
.submit-game-form-loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.modal-content {
background: transparent !important;
border: none !important;
border-radius: 1rem;
margin: auto;
padding: 0;
border-radius: 1rem;
transform: translateY(-50%);
}
.modal-overlay {
background: rgba(28, 32, 57, 0.8);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
transition: opacity 0.5s ease-out;
width: 100%;
z-index: 101;
}
.modal-content > * + * {
padding: 1rem;
max-height: 400px;
overflow: scroll;
margin-top: 0.75rem;
}
@media (min-width: 768px) {
.modal-content {
top: 50%;
width: fit-content;
}
}
@media (max-width: 767px) {
.modal-content {
border-radius: 1rem 1rem 0 0;
bottom: 0;
justify-content: center;
left: 0;
overflow-y: hidden;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 40%;
}
.container-content_form {
width: unset !important;
margin: auto;
padding: 16px;
}
.container-modal_form_content {
min-width: unset !important;
width: 100% !important;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/me.ruangguru.com/hs-fs/hub/2828691/hub_generated/module_assets/39227318886/1661845605588/module_39227318886_header-homepage-ruangguru-2021.min.js"></script>
<script src="https://unpkg.com/analytics@0.8.1/dist/analytics.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/analytics-plugin-trackable/dist/analytics-plugin-trackable.min.js"></script>
<script type="text/javascript" defer>
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'ruangguruLanding',
debug: false,
plugins: [analyticsTrackable()],
});
Analytics.ready(function () {
Analytics.page();
});
</script>
<script type="module" crossorigin src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/event/clash-of-champions/game/assets/index-_ECzCgfs.js"></script>
</head>
<body>
<style>p {
margin-bottom: 0;
}
.section-game {
position: relative;
}
.container-modal_form_content {
width: fit-content;
height: fit-content;
background: #fff;
margin: auto;
padding: 16px;
border-radius: 12px;
}
.modal-header {
margin-top: 2rem;
background: #003d40;
border: none;
}
.container-button-modal {
display: flex;
justify-content: space-between;
align-items: center;
}
.adaptox-pdf {
width: 100%;
height: 80vh;
border: none;
cursor: pointer;
overflow: auto;
-webkit-overflow-scrolling: touch; /* Untuk pengalaman scrolling yang lebih halus di perangkat iOS */
}
#adaptox-pdf-container {
width: 100%;
}
.adaptox-game {
width: 100%;
height: 80vh;
border: none;
cursor: pointer;
overflow: auto;
-webkit-overflow-scrolling: touch; /* Untuk pengalaman scrolling yang lebih halus di perangkat iOS */
}
#adaptox-game-container {
top: 0;
width: 100%;
}
#adaptox-game-container.fullscreen .adaptox-game {
height: 100%;
}
#adaptox-game-container.fullscreen {
position: fixed;
z-index: 9999;
height: 100vh;
width: 100vw;
background-color: black;
text-align: center;
}
.image-button {
border: none;
background: none;
}
.container-game_play {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 56px);
}
#adaptox-game-container.fullscreen .fullscreen-button {
position: absolute;
top: 10rem;
left: 1.5rem;
bottom: 3rem;
z-index: 10000;
rotate: 90deg;
}
.fullscreen-button {
z-index: 10000;
position: absolute;
bottom: 3rem;
right: 1rem;
}
.game-label {
color: var(--color-text-text-invert, #fff);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
margin: 0;
}
.game-desc-label {
color: #fff;
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin: 0;
}
.wrapper-game_header {
display: flex;
align-items: center;
gap: 4px;
}
.game-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #041a37;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3000;
}
.cta.disabled {
border: 1px solid #f9cbab;
cursor: default;
background: #f9cbab;
}
.modal-copy-url .container-modal_content {
background: #065154;
padding: 16px;
border-radius: 16px;
width: 240px;
margin: auto;
}
.modal-copy-url .modal-header {
margin-top: 0;
padding: 0;
display: flex;
justify-content: flex-end;
background: none;
}
.copy-url-info {
margin: 0;
}
.video-aoc-main {
border-radius: 0.75rem;
width: 100%;
aspect-ratio: 16 / 9;
background-color: black;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out {
animation: fadeOut 3s forwards;
}
@media (max-width: 767px) {
.container-game_play {
padding-top: 56px;
}
}
.container-form {
float: none;
margin: auto;
max-width: 468px;
min-height: 50rem;
}
#progressBar {
height: 100%;
width: 33%;
background-color: #08aab5;
}
.thumbnail {
background: url(https://cdn-web-2.ruangguru.com/landing-pages/assets/98c30129-1b51-4bf9-98d5-571ba01d0354.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 10rem;
}
h1 {
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 30px;
letter-spacing: -0.1px;
}
.form {
padding: 1rem;
}
.form label {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
border-radius: 12px;
border: 1px solid var(--saturated-koamaru-60, #6c72a0);
padding: 12px;
color: var(--color-text-text-subtle, #e8ecf4);
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 18px;
cursor: pointer;
}
#back {
border: 1px solid var(--prop-action-secondary-secondary-default-border, #cfd3db);
background: var(--prop-action-secondary-secondary-default, #fff);
color: var(--color-text-text-ink, #2c313a);
}
#next {
background: var(--color-background-bgsolid-bgsolid-warning, #f26d0f);
color: var(--color-text-text-invert, #fff);
}
#back:disabled,
#next:disabled {
background-color: #cccccc;
color: #fff;
cursor: not-allowed;
}
.form label.selected {
border-radius: 8px;
border: 1px solid #20a4b0;
background: linear-gradient(90deg, #148892 0%, #0c454a 100%);
}
.form label > input[type='radio'] {
display: none;
}
.form label > input[type='radio'] + span {
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #959dac;
display: inline-block;
position: relative;
}
.form label > input[type='radio']:checked + span {
border: 1px solid #20a4b0;
}
.form label > input[type='radio']:checked + span:after {
content: '';
height: 14px;
width: 14px;
border-radius: 50%;
position: absolute;
top: 51%;
left: 51%;
background-color: #20a4b0;
transform: translate(-51%, -51%);
}
</style>
<section class="section-game display-none">
<div class="page-center">
<div class="game-header">
<div class="wrapper-game_header">
<a href="https://cta.ruangguru.com/lp-coc-back-button" target="_self">
<button class="image-button">
<img width="32" height="32" class="back-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/79837c77-55f0-4b81-bf92-b968cb01d120.svg" />
</button>
</a>
<div class="wrapper-header_labels">
<p class="game-label">Clash of Champions Season 2</p>
<p class="game-desc-label">Game</p>
</div>
</div>
<button class="image-button">
<img width="32" height="32" class="share-button" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/f7779bdc-336f-46cc-8736-63aaf4261865.svg" />
</button>
</div>
<div class="container-game_play">
<div id="adaptox-game-container"></div>
<button id="fullscreen-button" class="image-button fullscreen-button">
<img width="38" height="24" class="fullscreen-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/def44a07-ccb5-46b3-8b55-813b761aa20c.svg" />
</button>
</div>
</div>
</section>
<section class="container-form" id="form-coc2">
<div class="page-center">
<div id="progressContainer" class="progress">
<div id="progressBar"></div>
</div>
<div class="thumbnail" id="thumbnail">
<h1 id="question-form">Kamu lagi di jenjang apa?</h1>
</div>
<form id="form" class="form">
<div id="choices"></div>
<div class="container-nav">
<input type="button" id="back" value="Back" />
<input type="button" id="next" value="Next" />
</div>
</form>
</div>
</section>
<div class="modal-overlay modal-copy-url display-none">
<div class="modal-content">
<div class="container-modal_content">
<div class="modal-header">
<img width="24" height="24" class="close-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3ce34412-1967-4b26-a193-cc38212bc9eb.svg" />
</div>
<p class="copy-url-info">Link berhasil disalin!</p>
</div>
</div>
</div>
<div class="modal-overlay modal-form-warning display-none">
<div class="modal-content">
<div class="container-modal_content">
<div class="modal-header">
<img width="24" height="24" class="close-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3ce34412-1967-4b26-a193-cc38212bc9eb.svg" />
</div>
<div class="container-warning-form">
<p class="warning-label">Yakin, mau tutup form ini? Kamu ga bisa maen game loh!</p>
<div class="container-button-modal">
<button class="secondary-cta undo-close-form">Batal</button>
<a href="https://www.ruangguru.com/clash-of-champions" target="_self">
<button class="cta">Yakin</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>