297 lines
30 KiB
HTML
297 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="vi">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Trang tính toán cỡ mẫu</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
padding-top: 80px; /* Adjusted for fixed header */
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
header {
|
||
width: 100%;
|
||
background: #0074D9;
|
||
color: white;
|
||
padding: 20px;
|
||
text-align: center;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
header h1 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden; /* Prevent scrolling on the container */
|
||
}
|
||
|
||
nav {
|
||
width: 300px; /* Adjusted width */
|
||
background: #f8f9fa; /* Bootstrap light gray */
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
border-right: 1px solid #dee2e6;
|
||
}
|
||
|
||
/* Custom style for accordion buttons */
|
||
.accordion-button {
|
||
font-weight: bold;
|
||
color: #0056b3;
|
||
}
|
||
.accordion-button:not(.collapsed) {
|
||
background-color: #e7f1ff;
|
||
}
|
||
|
||
/* Custom style for links inside accordion */
|
||
.nav-link-item {
|
||
color: #0074D9;
|
||
text-decoration: none;
|
||
}
|
||
.nav-link-item:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.guide-link {
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #FF4136;
|
||
text-decoration: none;
|
||
}
|
||
.guide-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
#content {
|
||
flex: 1;
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
iframe {
|
||
width: 100%;
|
||
height: calc(100vh - 100px); /* Adjusted height */
|
||
border: none;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
background: #f0f0f0;
|
||
padding: 10px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
border-top: 1px solid #dee2e6;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Công cụ trực tuyến hỗ trợ tính toán cỡ mẫu</h1>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<nav>
|
||
<div class="list-group mb-2">
|
||
<a href="#" onclick="loadPage('overview.html'); return false;" class="list-group-item list-group-item-action fw-bold">Tổng quan</a>
|
||
</div>
|
||
|
||
<div class="accordion" id="navAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTTest">t test</button>
|
||
</h2>
|
||
<div id="collapseTTest" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('t_one_sample.html'); return false;">Kiểm định t một mẫu</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('t_one_sample_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('t_two_sample.html'); return false;">Kiểm định t hai mẫu</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('t_two_sample_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('t_paired.html'); return false;">Kiểm định t ghép cặp</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('t_paired_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseZTest">z test</button>
|
||
</h2>
|
||
<div id="collapseZTest" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('z_one_sample.html'); return false;">Kiểm định z một mẫu</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('z_one_sample_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('z_two_sample.html'); return false;">Kiểm định z hai mẫu</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('z_two_sample_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('z_paired.html'); return false;">Kiểm định z ghép cặp</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('z_paired_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChiSquared">Chi-squared</button>
|
||
</h2>
|
||
<div id="collapseChiSquared" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('chi_independence.html'); return false;">Kiểm định độc lập</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('chi_independence_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('chi_gof.html'); return false;">Goodness-of-Fit</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('chi_gof_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FIXED SECTION -->
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCorrelation">Correlation tests</button>
|
||
</h2>
|
||
<div id="collapseCorrelation" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('cor_pearson.html'); return false;">Pearson Correlation</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('cor_pearson_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('cor_spearman.html'); return false;">Spearman Correlation</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('cor_spearman_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- END OF FIXED SECTION -->
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAnova">ANOVA</button>
|
||
</h2>
|
||
<div id="collapseAnova" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('anova_oneway.html'); return false;">One-Way ANOVA</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('anova_oneway_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('anova_twoway.html'); return false;">Two-Way ANOVA</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('anova_twoway_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('anova_repeated.html'); return false;">Repeated Measures</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('anova_repeated_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProportion">Proportion Test</button>
|
||
</h2>
|
||
<div id="collapseProportion" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('prop_one_sample.html'); return false;">Một mẫu</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('prop_one_sample_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('prop_two_sample.html'); return false;">Hai mẫu</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('prop_two_sample_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNonparametric">Nonparametric Tests</button>
|
||
</h2>
|
||
<div id="collapseNonparametric" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('mann_whitney.html'); return false;">Mann–Whitney U</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('mann_whitney_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('wilcoxon_signed.html'); return false;">Wilcoxon Signed-Rank</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('wilcoxon_signed_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('kruskal_wallis.html'); return false;">Kruskal–Wallis</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('kruskal_wallis_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAssumption">Assumption Tests</button>
|
||
</h2>
|
||
<div id="collapseAssumption" class="accordion-collapse collapse" data-bs-parent="#navAccordion">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('shapiro_wilk.html'); return false;">Shapiro–Wilk</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('shapiro_wilk_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('levene_test.html'); return false;">Levene’s Test</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('levene_test_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
<a href="#" class="nav-link-item" onclick="loadPage('f_test.html'); return false;">F-test for Variance</a>
|
||
<a href="#" class="guide-link" onclick="loadPage('f_test_guide.html'); return false;">[Hướng dẫn]</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div id="content">
|
||
<iframe id="mainframe" src="overview.html"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
Developed by IT Group
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
function loadPage(page) {
|
||
document.getElementById("mainframe").src = page;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|