|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Result | Text to Exam (Vocabulary Exam Generator)</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
font-family: 'Rubik', sans-serif; |
|
background-color: #1B1B1B; |
|
color: #FFF7D0; |
|
font-size: 62.5%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.container { |
|
padding: 3rem 3.4rem; |
|
background-color: #212529; |
|
border-radius: 24px; |
|
height: fit-content; |
|
max-height: 53rem; |
|
width: 80%; |
|
margin: 0 auto; |
|
margin-top: 5%; |
|
} |
|
|
|
.topbar { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
background-color: transparent; |
|
} |
|
|
|
h1 { |
|
font-size: 3.5rem; |
|
text-align: center; |
|
background-color: transparent; |
|
color: #FFE66C; |
|
} |
|
|
|
.exam { |
|
background-color: transparent; |
|
height: fit-content; |
|
max-height: 34rem; |
|
overflow-y: scroll; |
|
margin-top: 2rem; |
|
} |
|
|
|
.generate_another { |
|
background-color: #ffffff27; |
|
width: fit-content; |
|
height: fit-content; |
|
padding: 1rem; |
|
font-size: 1.8rem; |
|
border-radius: 10px; |
|
position: absolute; |
|
right: 0; |
|
margin-top: -7rem; |
|
margin-right: 12%; |
|
text-decoration: none; |
|
border: 2px solid #FFE76C8D; |
|
transition: .3s ease-out; |
|
color: #FFE66C; |
|
} |
|
|
|
.generate_another:hover { |
|
border: 2px solid #FFE66C; |
|
background-color: #ffe76c22; |
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
width: .8rem; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
border-radius: 10px; |
|
|
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: #FFF7D0; |
|
border-radius: 10px; |
|
} |
|
|
|
.note { |
|
background-color: transparent; |
|
margin: 1.5rem 0; |
|
border: 1px solid #FF0000; |
|
border-radius: 10px; |
|
padding: 1rem; |
|
display: flex; |
|
flex-direction: row; |
|
width: 100%; |
|
background-color: #ff000010; |
|
} |
|
|
|
i { |
|
margin-right: 1rem; |
|
} |
|
|
|
.alert { |
|
font-size: 1.6rem; |
|
color: #FF0000; |
|
background-color: transparent; |
|
} |
|
|
|
.question { |
|
font-size: 1.8rem; |
|
font-weight: 400; |
|
background-color: transparent; |
|
} |
|
|
|
ul { |
|
background-color: transparent; |
|
} |
|
|
|
.choice { |
|
font-size: 1.8rem; |
|
margin-left: 2rem; |
|
background-color: transparent; |
|
} |
|
|
|
.question_divider { |
|
height: 2rem; |
|
background-color: transparent; |
|
} |
|
|
|
.download { |
|
font-size: 2rem; |
|
border: 2px solid #FFF7D0; |
|
border-radius: 8px; |
|
background-color: #FFF7D0; |
|
color: #212529; |
|
font-weight: 500; |
|
padding: .5rem 1.2rem; |
|
width: fit-content; |
|
height: fit-content; |
|
text-decoration: none; |
|
} |
|
|
|
.dev { |
|
background-color: transparent; |
|
padding: 1rem 3rem; |
|
width: 38rem; |
|
margin: 0 auto; |
|
margin-top: 10px; |
|
margin-bottom: 1.2%; |
|
border-radius: 40px; |
|
border: 1px solid #33363A; |
|
display: flex; |
|
flex-direction: row; |
|
font-size: 2.6rem; |
|
display: flex; |
|
justify-content: center; |
|
background-color: #212529; |
|
text-decoration: none; |
|
transition: .2s; |
|
} |
|
|
|
.dev:hover { |
|
|
|
border: 1px solid #FFF7D0; |
|
} |
|
|
|
.credit { |
|
width: fit-content; |
|
margin-right: 3px; |
|
background-color: transparent; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<div class="topbar"> |
|
<h1>Results</h1> |
|
<a href="/send" class="download" download>Download</a> |
|
</div> |
|
|
|
<div class="exam"> |
|
{% if not output %} |
|
<div class="note"> |
|
<i class="alert fa-solid fa-triangle-exclamation"></i> |
|
<p class="alert">Oops! Something went wrong. Try changing the CEFR difficulty level or choose ALL CEFR level. You might as well try putting a longer text passage next time. |
|
<a class="alert" target="_blank" href="https://scribehow.com/shared/How_to_use_T2E_Vocabulary_Exam_Generator__vyYu396JT_qZ0jKATVUqeQ#89cd5f52">Read more</a> |
|
</p> |
|
</div> |
|
{% endif %} |
|
{% for key, values in output.items() %} |
|
<h2 class="question">What is the meaning of the word "{{ key.split(' = ')[0] }}" in this sentence "{{ key.split(' = ')[1] }}"?</h2> |
|
<ul> |
|
{% for value in values %} |
|
<li class="choice">{{ value }}</li> |
|
{% endfor %} |
|
</ul> |
|
<div class="question_divider"></div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
<a class="generate_another" href="/">Generate another exam</a> |
|
<a href="https://nontgcob.com/" target="_blank" class="dev"> |
|
<p class="credit">Developed by Nutnornont Chamadol</p> |
|
</a> |
|
</body> |
|
</html> |
