SD
SMP
SMA
2026-03-08 18:50
Diff
<!doctype html>
<html class="no-js" lang="id">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="author" content="Ruangguru Tech Team" />
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta name="description" content="" />
<meta name="generator" content="HubSpot" />
<title>Liga Ruangguru - Webview Leaderboard</title>
<link rel="shortcut icon" href="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/favicon-rg-15.ico" />
<meta property="og:description" content="" />
<meta property="og:title" content="Liga Ruangguru - Webview Leaderboard" />
<meta name="twitter:description" content="" />
<meta name="twitter:title" content="Liga Ruangguru - Webview Leaderboard" />
<style>
a.cta_button {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
vertical-align: middle;
}
.hs-breadcrumb-menu {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.hs-breadcrumb-menu-item {
float: left;
padding: 10px 0px 10px 10px;
}
.hs-featured-image-link {
border: 0;
}
.hs-featured-image {
float: right;
margin: 0 0 20px 20px;
max-width: 50%;
}
@media (max-width: 568px) {
.hs-featured-image {
float: none;
margin: 0;
width: 100%;
max-width: 100%;
}
}
.hs-screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
</style>
<link
rel="stylesheet"
href="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/liga.ruangguru.com/hs-fs/hub/2828691/hub_generated/module_assets/57587037089/1640837180094/module_57587037089_content_liga_leaderboard.min.css"
/>
<link rel="canonical" href="https://www.ruangguru.com/event/liga/webview/leaderboard" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-PSPLP84');
</script>
<!-- End Google Tag Manager -->
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta name="google-site-verification" content="VJAn1g6wmtTZPpTXh-B4xoSFEkUi5jcV74xQSr6jnOM" />
<style>
.row-fluid [class*='span'] {
min-height: 0 !important;
}
.bantuan {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 999;
display: flex;
align-items: flex-end;
justify-content: flex-end;
cursor: pointer;
transition: all 0.6s ease;
}
@media (min-width: 768px) {
.bantuan img {
width: auto;
height: 129px;
transition: all 0.4s ease;
}
.clicked {
bottom: 0.25rem;
}
.clicked img {
width: auto;
height: 64px;
}
}
@media (max-width: 767px) {
.bantuan {
bottom: 2rem;
align-items: center;
}
.bantuan img {
width: auto;
height: 64px;
}
}
</style>
<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/liga/webview/leaderboard" />
<meta name="twitter:card" content="summary_large_image" />
<meta http-equiv="content-language" content="en" />
<link rel="stylesheet" href="https://cdn-web-2.ruangguru.com/landing-page-web/public/assets/common/layout.min.css" />
<link
rel="stylesheet"
href="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/liga.ruangguru.com/hs-fs/hub/2828691/hub_generated/template_assets/32781682988/1666344401391/A_Ruangguru_Projects/1_SOP_Landing_Page/SOP_Style_Ruangguru.min.css"
/>
<meta name="robots" content="noindex, follow" />
</head>
<body class="hs-content-id-57588819572 hs-landing-page hs-page" style="">
<div class="header-container-wrapper">
<div class="header-container container-fluid"></div>
<!--end header -->
</div>
<!--end header wrapper -->
<div class="body-container-wrapper">
<div class="body-container container-fluid">
<div class="row-fluid-wrapper row-depth-1 row-number-1">
<div class="row-fluid">
<div class="span12 widget-span widget-type-custom_widget" style="" data-widget-type="custom_widget" data-x="0" data-w="12">
<div
id="hs_cos_wrapper_module_16342703650157"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="module"
>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<div class="webview-wrap">
<div class="button-back">
<a id="back">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Gamification/ic-back.svg" alt="Icon Back" />
</a>
</div>
<div class="banner">
<h1>
Leaderboard Sekolah
<br />
Liga Ruangguru
</h1>
</div>
<div class="leaderboard-liga">
<div class="page-center">
<!-- <div class="leaderboard__title">
<h1>Peringkat Sekolah</h1>
</div> -->
<div class="leaderboard__content">
<div class="leaderboard-nav-wrap">
<div class="lead-nav aktif" nav-leaderboard="sd">SD</div>
<div class="lead-nav" nav-leaderboard="smp">SMP</div>
<div class="lead-nav" nav-leaderboard="sma">SMA</div>
</div>
<div class="leaderboard-content-wrap">
<!-- sd -->
<div class="lead-content" data-leaderboard="sd">
<div class="table-wrap-pemenang" style="display: block">
<h2 class="titlenya">Sekolah Dasar</h2>
<table id="table_id_1" class="display" style="width: 100%">
<thead class="custom-thead-c">
<tr class="custom-c">
<th>Rank</th>
<th>Sekolah</th>
<th>Poin</th>
</tr>
</thead>
<!--MATH ISI DISINI-->
<tbody id="board-sd"></tbody>
</table>
</div>
<div class="wrapping-nodata" style="display: none">
<table class="nodata">
<thead>
<tr>
<th class="nama-th" style="text-align: left">Rank</th>
<th style="text-align: left">Sekolah</th>
<th class="provinsi-th">Poin</th>
</tr>
</thead>
</table>
<div class="nodata-content">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/nocontent.png" />
<p class="font-desc">
Wah, siapa ya pemenang selanjutnya?
<br />
Nantikan sekolahmu disini!
</p>
</div>
</div>
</div>
<!-- smp -->
<div class="lead-content" data-leaderboard="smp">
<div class="table-wrap-pemenang" style="display: block">
<h2 class="titlenya">Sekolah Menengah Pertama</h2>
<table id="table_id_2" class="display" style="width: 100%">
<thead class="custom-thead-c">
<tr class="custom-c">
<th>Rank</th>
<th>Sekolah</th>
<th>Poin</th>
</tr>
</thead>
<tbody id="board-smp"></tbody>
</table>
</div>
<div class="wrapping-nodata" style="display: none">
<table class="nodata">
<thead>
<tr>
<th class="nama-th" style="text-align: left">Rank</th>
<th style="text-align: left">Sekolah</th>
<th class="provinsi-th">Poin</th>
</tr>
</thead>
</table>
<div class="nodata-content">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/nocontent.png" />
<p class="font-desc">
Wah, siapa ya pemenang selanjutnya?
<br />
Nantikan sekolahmu disini!
</p>
</div>
</div>
</div>
<!-- <div class="lead-content" data-leaderboard="smp">
<div class="table-wrap-pemenang" style="display: block;">
<table class="nodata" id="konten-pemenang-inner">
<thead>
<tr>
<th class="peringkat-inner" style="text-align: center;max-width: 100px;
width: 100px;">Rank</th>
<th style="text-align: left">Sekolah</th>
<th class="provinsi-th">Poin</th>
</tr>
</thead>
<tbody class="inner-tbody" id="board-smp">
</tbody>
</table>
</div>
<div class="wrapping-nodata" style="display: none;">
<table class="nodata">
<thead>
<tr>
<th class="nama-th" style="text-align: left;">Rank</th>
<th style="text-align: left">Sekolah</th>
<th class="provinsi-th">Poin</th>
</tr>
</thead>
</table>
<div class="nodata-content">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/nocontent.png">
<p class="font-desc">Wah, siapa ya pemenang selanjutnya?<br>Nantikan sekolahmu disini!</p>
</div>
</div>
</div> -->
<!-- sma -->
<div class="lead-content" data-leaderboard="sma">
<div class="table-wrap-pemenang" style="display: block">
<h2 class="titlenya">Sekolah Menengah Atas</h2>
<table id="table_id_3" class="display" style="width: 100%">
<thead class="custom-thead-c">
<tr class="custom-c">
<th>Rank</th>
<th>Sekolah</th>
<th>Poin</th>
</tr>
</thead>
<!--BEST SCHOOL REGIONAL ROUND ISI DISINI-->
<tbody id="board-sma"></tbody>
</table>
</div>
<div class="wrapping-nodata" id="no-data-sma" style="display: none">
<table class="nodata">
<thead>
<tr>
<th class="nama-th" style="text-align: left">Rank</th>
<th style="text-align: left">Sekolah</th>
<th class="provinsi-th">Poin</th>
</tr>
</thead>
</table>
<div class="nodata-content">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/nocontent.png" />
<p class="font-desc">
Wah, siapa ya pemenang selanjutnya?
<br />
Nantikan sekolahmu disini!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="page-center">
<p class="note">
*Poin diambil per tanggal 1 November 2021
</p>
</div> -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
$(document).ready(function () {
// Data SD
$.ajax({
type: 'GET',
url: 'https://form.ruangguru.com/api/v1/liga/school/rank?grade=SD',
headers: {
LigaRuangguruPassword: 'S0R4moW43iXOCCBz',
},
dataType: 'json',
success: function (response) {
let boardSma = $('#board-sd');
let dataSma = response.data;
$.each(dataSma, function (index, value) {
if (value.rank == 1) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat" width="33%"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara1.png"
alt="Piala"></td>
<td width="40%">${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else if (value.rank == 2) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara2.png"
alt="Piala"></td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else if (value.rank == 3) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara3.png"
alt="Piala"></td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else {
boardSma.append(`
<tr>
<td>${value.rank}</td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('error');
},
});
// Data SMP
$.ajax({
type: 'GET',
url: 'https://form.ruangguru.com/api/v1/liga/school/rank?grade=SMP',
headers: {
LigaRuangguruPassword: 'S0R4moW43iXOCCBz',
},
dataType: 'json',
success: function (response) {
let boardSma = $('#board-smp');
let dataSma = response.data;
$.each(dataSma, function (index, value) {
if (value.rank == 1) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat" width="33%"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara1.png"
alt="Piala"></td>
<td width="40%">${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else if (value.rank == 2) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara2.png"
alt="Piala"></td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else if (value.rank == 3) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara3.png"
alt="Piala"></td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else {
boardSma.append(`
<tr>
<td>${value.rank}</td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('error');
},
});
// Data SMA
$.ajax({
type: 'GET',
url: 'https://form.ruangguru.com/api/v1/liga/school/rank?grade=SMA',
headers: {
LigaRuangguruPassword: 'S0R4moW43iXOCCBz',
},
dataType: 'json',
success: function (response) {
let boardSma = $('#board-sma');
let dataSma = response.data;
$.each(dataSma, function (index, value) {
if (value.rank == 1) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat" width="33%"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara1.png"
alt="Piala"></td>
<td width="40%">${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else if (value.rank == 2) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara2.png"
alt="Piala"></td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else if (value.rank == 3) {
boardSma.append(`
<tr class="peringkats">
<td class="peringkat"><img
src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20Liga%20Ruangguru/Leaderboard/juara3.png"
alt="Piala"></td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
} else {
boardSma.append(`
<tr>
<td>${value.rank}</td>
<td>${value.schoolName}</td>
<td>${value.totalPoint}</td>
</tr>
`);
}
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('error');
},
});
});
// axios.get('https://form-staging.ruangguru.com/api/v1/liga/school/rank?grade=SMA', {
// headers: {
// 'LigaRuangguruPassword':'S0R4moW43iXOCCBz'
// }
// }).then(function(response) {
// console.log(response.data)
// })
// .catch(function(error) {
// console.log(error);
// })
// .then(function () {
// // always executed
// });
</script>
<script>
$(".lead-content[data-leaderboard='sd']").attr('style', 'display:block');
$('.lead-nav').click(function () {
$('.lead-nav').removeClass('aktif');
$(this).addClass('aktif');
var data = $(this).attr('nav-leaderboard');
$('.lead-content').attr('style', 'display:none');
$(".lead-content[data-leaderboard='" + data + "']").attr('style', 'display:block');
});
</script>
<script>
$(document).ready(function () {
$.noConflict();
// data sd
$('#table_id_1').DataTable({
bPaginate: false,
bLengthChange: false,
bFilter: true,
bInfo: false,
bAutoWidth: true,
ordering: false,
searching: false,
order: [[1, 'asc']],
oLanguage: {
sSearch: '',
},
language: {
searchPl7older: 'Cari nama kamu',
},
scrollResize: true,
scrollY: 400,
scrollCollapse: true,
autoWidth: false,
initComplete: function (settings, json) {
$('table.dataTable').css('width', '100%');
$('div.dataTables_scrollHeadInner').css('width', '100%');
$('#table_id_1_wrapper').append(
'<div id="tanda1"></div><div class="d-flex justify-content-center"><a title="" id="scroll-orange1" class="btn btn-custom-c">Lihat Lebih Banyak <img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/icon_arrow_bottom_circle.svg" alt=""></a></div>'
);
var test_count = 0;
$('.dataTables_scrollBody').each(function (index) {
test_count = test_count + 1;
if (test_count == 1) {
if ($(this).attr('id')) {
} else {
$(this).attr('id', 'konten_1');
}
}
});
$('#scroll-orange1').click(function () {
// console.log("test");
$('#konten_1').animate(
{
scrollTop: $('#tanda1').position().top + $('#konten_1').scrollTop(),
},
'slow'
);
// if ($('.dataTables_scrollBody').scrollTop() + $('.dataTables_scrollBody').innerHeight() >= $(
// '.dataTables_scrollBody')[0].scrollHeight) {
// $("#scroll-orange").hide();
// } else {
// $("#scroll-orange").show();
// }
});
$('#konten_1').on('scroll', function () {
// console.log("masuk scroll");
// console.log("$(this).scrollTop() " + $(this).scrollTop());
// console.log("$(this).innerHeight() " + $(this).innerHeight());
// console.log("$(this)[0].scrollHeight " + $(this)[0].scrollHeight);
var test = $(this).scrollTop() + $(this).innerHeight();
// console.log("$(this).scrollTop() + $(this).innerHeight() " + test)
if (Math.ceil($(this).scrollTop() + $(this).innerHeight()) >= $(this)[0].scrollHeight) {
$('#scroll-orange1').hide();
} else {
$('#scroll-orange1').show();
}
});
},
dom: 'Pfrtip',
});
// ---------------------------------------
// data smp
$('#table_id_2').DataTable({
bPaginate: false,
bLengthChange: false,
bFilter: true,
bInfo: false,
bAutoWidth: true,
ordering: false,
searching: false,
order: [[1, 'asc']],
oLanguage: {
sSearch: '',
},
language: {
searchPl7older: 'Cari nama kamu',
},
scrollResize: true,
scrollY: 400,
scrollCollapse: true,
autoWidth: false,
initComplete: function (settings, json) {
$('table.dataTable').css('width', '100%');
$('div.dataTables_scrollHeadInner').css('width', '100%');
$('#table_id_2_wrapper').append(
'<div id="tanda2"></div><div class="d-flex justify-content-center"><a title="" id="scroll-orange2" class="btn btn-custom-c">Lihat Lebih Banyak <img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/icon_arrow_bottom_circle.svg" alt=""></a></div>'
);
var test_count = 0;
$('.dataTables_scrollBody').each(function (index) {
test_count = test_count + 1;
if (test_count == 2) {
if ($(this).attr('id')) {
} else {
$(this).attr('id', 'konten_2');
}
}
});
$('#scroll-orange2').click(function () {
// console.log("test");
$('#konten_2').animate(
{
scrollTop: $('#tanda2').position().top + $('#konten_2').scrollTop(),
},
'slow'
);
// if ($('.dataTables_scrollBody').scrollTop() + $('.dataTables_scrollBody').innerHeight() >= $(
// '.dataTables_scrollBody')[0].scrollHeight) {
// $("#scroll-orange").hide();
// } else {
// $("#scroll-orange").show();
// }
});
$('#konten_2').on('scroll', function () {
// console.log("masuk scroll");
// console.log("$(this).scrollTop() " + $(this).scrollTop());
// console.log("$(this).innerHeight() " + $(this).innerHeight());
// console.log("$(this)[0].scrollHeight " + $(this)[0].scrollHeight);
var test = $(this).scrollTop() + $(this).innerHeight();
// console.log("$(this).scrollTop() + $(this).innerHeight() " + test)
if (Math.ceil($(this).scrollTop() + $(this).innerHeight()) >= $(this)[0].scrollHeight) {
$('#scroll-orange2').hide();
} else {
$('#scroll-orange2').show();
}
});
},
dom: 'Pfrtip',
});
// --------------------------------
// data sma
$('#table_id_3').DataTable({
bPaginate: false,
bLengthChange: false,
bFilter: true,
bInfo: false,
bAutoWidth: true,
ordering: false,
searching: false,
order: [[1, 'asc']],
oLanguage: {
sSearch: '',
},
language: {
searchPl7older: 'Cari nama kamu',
},
scrollResize: true,
scrollY: 400,
scrollCollapse: true,
autoWidth: false,
initComplete: function (settings, json) {
$('table.dataTable').css('width', '100%');
$('div.dataTables_scrollHeadInner').css('width', '100%');
$('#table_id_3_wrapper').append(
'<div id="tanda3"></div><div class="d-flex justify-content-center"><a title="" id="scroll-orange3" class="btn btn-custom-c">Lihat Lebih Banyak <img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/Olimpiade%20Ruangguru/icon_arrow_bottom_circle.svg" alt=""></a></div>'
);
var test_count = 0;
$('.dataTables_scrollBody').each(function (index) {
test_count = test_count + 1;
if (test_count == 3) {
if ($(this).attr('id')) {
} else {
$(this).attr('id', 'konten_3');
}
}
});
$('#scroll-orange3').click(function () {
// console.log("test");
$('#konten_3').animate(
{
scrollTop: $('#tanda3').position().top + $('#konten_3').scrollTop(),
},
'slow'
);
// if ($('#konten_3').scrollTop() + $('#konten_3').innerHeight() >= $(
// '#konten_3')[0].scrollHeight) {
// $("#scroll-orange").hide();
// } else {
// $("#scroll-orange").show();
// }
});
$('#konten_3').on('scroll', function () {
// console.log("masuk scroll");
// console.log("$(this).scrollTop() " + $(this).scrollTop());
// console.log("$(this).innerHeight() " + $(this).innerHeight());
// console.log("$(this)[0].scrollHeight " + $(this)[0].scrollHeight);
var test = $(this).scrollTop() + $(this).innerHeight();
// console.log("$(this).scrollTop() + $(this).innerHeight() " + test)
if (Math.ceil($(this).scrollTop() + $(this).innerHeight()) >= $(this)[0].scrollHeight) {
$('#scroll-orange3').hide();
} else {
$('#scroll-orange3').show();
}
});
},
dom: 'Pfrtip',
});
});
</script>
</div>
</div>
<!--end widget-span -->
</div>
<!--end row-->
</div>
<!--end row-wrapper -->
</div>
<!--end body -->
</div>
<!--end body wrapper -->
<script src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/liga.ruangguru.com/hs-fs/hub/2828691/hub_generated/module_assets/57587037089/1640837180012/module_57587037089_content_liga_leaderboard.min.js"></script>
<!-- Start of HubSpot Analytics Code -->
<script type="text/javascript">
var _hsq = _hsq || [];
_hsq.push(['setContentType', 'landing-page']);
_hsq.push(['setCanonicalUrl', 'https:\/\/liga.ruangguru.com\/webview\/leaderboard']);
_hsq.push(['setPageId', '57588819572']);
_hsq.push([
'setContentMetadata',
{
contentPageId: 57588819572,
legacyPageId: '57588819572',
contentFolderId: null,
contentGroupId: null,
abTestId: null,
languageVariantId: 57588819572,
languageCode: 'en',
},
]);
</script>
<script type="text/javascript">
var hsVars = {
render_id: 'd3f541aa-ee44-4654-a7d2-84f28bafea60',
ticks: 1684030122661,
page_id: 57588819572,
content_group_id: 0,
portal_id: 2828691,
app_hs_base_url: 'https://app.hubspot.com',
cp_hs_base_url: 'https://cp.hubspot.com',
language: 'en',
analytics_page_type: 'landing-page',
analytics_page_id: '57588819572',
category_id: 1,
folder_id: 0,
is_hubspot_user: false,
};
</script>
<!-- Load CSS for all versions -->
<script>
// CSS loading function available for all versions
function loadFloatingCSS() {
// Check if CSS is already loaded
if (document.getElementById('fb-component-css')) {
return;
}
// Create and append CSS style block to head
const style = document.createElement('style');
style.id = 'fb-component-css';
style.textContent = `
.bantuan-container {
position: relative;
}
.bantuan-element {
position: fixed;
z-index: 999;
display: flex;
align-items: flex-end;
justify-content: flex-end;
cursor: pointer;
transition: all 0.6s ease;
}
.bantuan-top {
bottom: 11rem;
right: 2rem;
}
.bantuan-bottom {
bottom: 2rem;
right: 2rem;
}
.bantuan-top-2 {
bottom: 15rem;
right: 2rem;
}
.bantuan-top-3 {
bottom: 19rem;
right: 2rem;
}
.bantuan-bottom-2 {
bottom: 5rem;
right: 2rem;
}
.bantuan-bottom-3 {
bottom: 8rem;
right: 2rem;
}
@media (min-width: 768px) {
.bantuan-element img {
width: auto;
transition: all 0.4s ease;
}
.bantuan-top img {
width: 140px;
}
.bantuan-bottom img {
width: 140px;
}
.bantuan-top-2 img,
.bantuan-top-3 img {
width: 140px;
}
.bantuan-bottom-2 img,
.bantuan-bottom-3 img {
width: 140px;
}
.bantuan-element.clicked {
bottom: 9rem;
right: 2.5rem;
}
.bantuan-element.clicked img {
width: auto;
height: 64px;
}
}
@media (max-width: 767px) {
.bantuan-top {
bottom: 8rem;
right: 1rem;
align-items: center;
}
.bantuan-bottom {
bottom: 2rem;
right: 1.25rem;
align-items: center;
}
.bantuan-top-2 {
bottom: 12rem;
right: 1rem;
align-items: center;
}
.bantuan-top-3 {
bottom: 16rem;
right: 1rem;
align-items: center;
}
.bantuan-bottom-2 {
bottom: 5rem;
right: 1.25rem;
align-items: center;
}
.bantuan-bottom-3 {
bottom: 8rem;
right: 1.25rem;
align-items: center;
}
.bantuan-element img {
width: auto;
}
.bantuan-top img,
.bantuan-top-2 img,
.bantuan-top-3 img {
width: 96px;
}
.bantuan-bottom img,
.bantuan-bottom-2 img,
.bantuan-bottom-3 img {
width: 96px;
}
}
.bantuan-element:hover {
transform: scale(1.05);
}
.bantuan-element img {
max-width: 100%;
height: auto;
}
`;
document.head.appendChild(style);
}
// Load CSS immediately
loadFloatingCSS();
</script>
<div id="bantuan-divs-container" style="position: relative" data-product="ruangguru" data-table=""></div>
<script>
class FloatingDivsComponent {
constructor(product = 'ruangguru', table = 'rg_promo_banner') {
this.container = document.getElementById('bantuan-divs-container');
this.floatingElements = [];
this.product = product;
this.table = table;
// Configuration
this.config = {
baseApiUrl: 'https://gw.ruangguru.com/api/v3/rdb/p_ddgy8hjx5dxsqx/rg_banner/views/',
apiKey: 'vLyK3dJrDBRmOwueX2OJXibMkgsUbBk0WS4ua2p1',
maxElements: 2,
zIndexBase: 100,
};
// Build dynamic API URL based on table parameter
this.config.apiUrl = this.buildApiUrl();
this.init();
}
buildApiUrl() {
const baseUrl = this.config.baseApiUrl;
const tableName = this.table || 'rg_promo_banner';
const queryParams =
'offset=0&limit=99999&sort=rankPosition&where=(type,eq,floating)~and(showIn,anyof,landingPage)~and(hide,is,false)~and(product,eq,' +
this.product +
')&nested%5Bcta%5D%5Bfields%5D=Id,name,ctaId,imageUrl,ctaLink,targetUrl';
return `${baseUrl}${tableName}?${queryParams}`;
}
async init() {
try {
await this.fetchFloatingElements();
this.renderFloatingElements();
} catch (error) {
console.error('Failed to initialize floating divs component:', error);
}
}
async fetchFloatingElements() {
try {
const options = {
method: 'GET',
headers: {
'xc-token': this.config.apiKey || 'vLyK3dJrDBRmOwueX2OJXibMkgsUbBk0WS4ua2p1',
},
};
const urlNoco = this.config.apiUrl;
const response = await fetch(urlNoco, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
this.floatingElements = this.processApiResponse(data);
} catch (error) {
console.error('Error fetching floating elements:', error);
throw error;
}
}
processApiResponse(data) {
if (!data || !data.list || !Array.isArray(data.list)) {
return [];
}
// Ensure we only get maximum 2 elements
const limitedElements = data.list.slice(0, this.config.maxElements);
return limitedElements;
}
renderFloatingElements() {
if (!this.container || this.floatingElements.length === 0) {
return;
}
// Additional safeguard: ensure we never render more than maxElements
const elementsToRender = this.floatingElements.slice(0, this.config.maxElements);
// Clean up existing elements and their event listeners
this.cleanupExistingElements();
// Clear existing content
this.container.innerHTML = '';
elementsToRender.forEach((element, index) => {
const floatingDiv = this.createFloatingDiv(element, index);
this.container.appendChild(floatingDiv);
});
}
cleanupExistingElements() {
// Clear existing elements (no need for event listener cleanup with CSS approach)
const existingElements = this.container.querySelectorAll('[data-floating-element]');
existingElements.forEach(element => {
element.remove();
});
}
createFloatingDiv(element, index) {
const div = document.createElement('div');
const cta = element.cta[0]; // Use the first CTA
// Add data attribute for cleanup tracking
div.setAttribute('data-floating-element', 'true');
// Apply CSS classes based on rankPosition
const positionClass = this.getPositionClass(element.rankPosition, index);
div.className = `bantuan-element ${positionClass}`;
div.style.zIndex = this.config.zIndexBase + index;
// Create the link and image
const link = document.createElement('a');
link.href = 'https://cta.ruangguru.com/' + cta.ctaId || '#';
link.target = '_blank';
// Add tracking attributes
link.setAttribute('data-tracking-event-type', 'landing_page__core__item_click');
link.setAttribute(
'data-tracking-context',
JSON.stringify({
product_name: this.product,
cta_action: 'redirection',
cta_action_detail: link.href,
item_type: 'floating',
item_name: element.name || 'Floating element',
item_category: 'payment',
item_position: index,
item_serial: null,
section_type: 'floating_item',
section_position: 'body',
section_name: 'floating_item',
})
);
const img = document.createElement('img');
img.src = element.imageUrl + '?h=200&convert=webp';
img.alt = element.name || 'Floating element';
img.loading = 'lazy';
// Add click tracking
link.addEventListener('click', () => {
this.trackClick(element, cta);
});
link.appendChild(img);
div.appendChild(link);
return div;
}
getPositionClass(rankPosition, index) {
// Define positioning classes based on rankPosition
if (rankPosition === 1) {
return 'bantuan-top'; // Top position
} else if (rankPosition === 2) {
return 'bantuan-bottom'; // Bottom position
} else {
// For additional elements, distribute them evenly
return `bantuan-${index % 2 === 0 ? 'top' : 'bottom'}-${Math.floor(index / 2) + 1}`;
}
}
trackClick(element, cta) {
// Implement click tracking logic here
console.log('Floating element clicked:', {
elementId: element.Id,
elementName: cta.name,
ctaId: cta.ctaId,
targetUrl: cta.targetUrl,
});
}
// Public method to manually refresh
async refresh() {
try {
await this.fetchFloatingElements();
this.renderFloatingElements();
} catch (error) {
console.error('Failed to refresh floating elements:', error);
throw error;
}
}
// Public method to get current floating elements
getFloatingElements() {
return [...this.floatingElements];
}
}
// Initialize the component when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
// Get product and table parameters from data attributes
const container = document.getElementById('bantuan-divs-container');
const product = container.getAttribute('data-product') || 'ruangguru';
const table = container.getAttribute('data-table') || 'rg_promo_banner';
new FloatingDivsComponent(product, table);
});
// Export for use in other modules if needed
if (typeof module !== 'undefined' && module.exports) {
module.exports = FloatingDivsComponent;
}
</script>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PSPLP84" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<script type="text/javascript">
$('meta[name=author]').remove();
$('head').append('<meta name="author" content="Ruangguru Tech Team">');
var mylang = 'id';
document.getElementsByTagName('html')[0].setAttribute('lang', mylang);
</script>
<style>
.dataTables_wrapper .dataTables_filter {
float: right !important;
text-align: right !important;
width: 50% !important;
}
a#scroll-orange1 {
left: 0rem !important;
margin: auto !important;
/*display: flex!important;*/
/*align-items: center!important;*/
/*justify-content: center!important;*/
left: 10% !important;
right: 10% !important;
}
@media (max-width: 767px) {
}
</style>
<!-- Generated by the HubSpot Template Builder - template version 1.03 -->
</body>
</html>