129 lines
4.2 KiB
PHP
129 lines
4.2 KiB
PHP
<style>
|
|
.modal-content {
|
|
color: black; /* 모달 텍스트 색상 변경 */
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
<?= $this->renderSection('content') ?>
|
|
<style>
|
|
.word-card {
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.word-card-body {
|
|
font-size: 0.9rem;
|
|
}
|
|
.pastel-bg {
|
|
background-color: #f9f0ff; /* 연한 파스텔톤 배경색 */
|
|
}
|
|
|
|
/* Center modals vertically and horizontally */
|
|
.modal-dialog {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-title{
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.container {
|
|
width: 100%; /* 원하는 div 너비 설정 */
|
|
}
|
|
|
|
.content {
|
|
word-wrap: break-word; /* 텍스트가 div 영역을 넘어가면 줄바꿈 */
|
|
overflow-wrap: break-word; /* 최신 브라우저용 */
|
|
}
|
|
|
|
#test_alert {
|
|
height: 20px; /* 높이 설정 */
|
|
display: flex;
|
|
align-items: center; /* 수직 가운데 정렬 */
|
|
justify-content: center; /* 수평 가운데 정렬 */
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
transform: translateX(0);
|
|
}
|
|
10% {
|
|
transform: translateX(-5px);
|
|
}
|
|
20% {
|
|
transform: translateX(5px);
|
|
}
|
|
30% {
|
|
transform: translateX(-5px);
|
|
}
|
|
40% {
|
|
transform: translateX(5px);
|
|
}
|
|
50% {
|
|
transform: translateX(-5px);
|
|
}
|
|
60% {
|
|
transform: translateX(5px);
|
|
}
|
|
70% {
|
|
transform: translateX(-5px);
|
|
}
|
|
80% {
|
|
transform: translateX(5px);
|
|
}
|
|
90% {
|
|
transform: translateX(-5px);
|
|
}
|
|
}
|
|
.shake {
|
|
animation: shake 1s; /* 애니메이션 이름과 지속 시간 */
|
|
}
|
|
</style>
|
|
<!-- Call to Action-->
|
|
|
|
<section class="content-section bg-primary text-white">
|
|
<div class="container px-4 px-lg-5 text-center">
|
|
<!-- 부트스트랩 모달 HTML -->
|
|
<div class="modal fade" id="testStartModal" tabindex="-1" aria-labelledby="testStartModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header modal-header-work">
|
|
<div class="modal-title " id="testcStartModalLabel"><?=$totcnt?> / <?=$num?> </div>
|
|
<span class="badge rounded-pill bg-success"><?=$type?></span>
|
|
</div>
|
|
<div class="modal-body" style="text-align: left;">
|
|
<div class="container mt-1">
|
|
<h5><span class="badge rounded-pill bg-secondary">Q.<?=$num?></span> <?=$question?></h5>
|
|
<ul class="list-group mt-4">
|
|
<?php foreach ($order as $index => $exampleKey): ?>
|
|
<button type="button" class="list-group-item list-group-item-action starttestbtnlist" data-num="<?=$index?>">
|
|
<span class="badge rounded-pill bg-dark"><?=$index?></span> <?= $examples[$exampleKey] ?>
|
|
</button>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="alert alert-danger" id="test_alert" role="alert" style="display: none;"></div>
|
|
<div class="container mb-3">
|
|
<!--<a href="<?/*= base_url('/starttest/' . ($num+1)) */?>" class="btn btn-outline-dark ms-auto">Enter</a>-->
|
|
<button type="button" class="btn btn-success btn-sm" id="testenterbtn" data-type="close">Enter</button>
|
|
</div>
|
|
<div class="modal-footer d-flex">
|
|
<div>
|
|
<button type="button" class="btn btn-warning btn-sm stoplearning" data-type="close">Stop Test</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|