Conteúdo do Curso
Test UI Features
Test UI Features
1. Buttons
+ (deprecated) Hint and Solution Single Block+ (deprecated) TypeScript Hint/Solution+ (deprecated) C# Hint/Solution+ (deprecated) JavaScript Hint/Solution+ (deprecated) Java Hint/Solution+ (deprecated) GO Lang Hint/Solution+ (deprecated) Python Hint/Solution+ (deprecated) Java Hint/Solution with Copyable & Highlighted Code+ (deprecated) Scala Hint/Solution with Copyable & Highlighted Code+ (deprecated) Hint/Video Tutorial+ (deprecated) Hint/Solution/Video Tutorial+ new Hint and Solution Single Block Buttons+ new Hint/Solution Buttons+ new Hint/Solution/Video Tutorial Buttons+ Code Description Button+ Download File in the TXT format+ Download Course Summary
2. ContentDev Tools
3. Video Tools
6. Other
+ (deprecated) IDE TestingWindows / Apple / Linux InstructionsNested List Testing+ (deprecated) CSS Example Practice Test+ (deprecated) Spinning animOleh S testsItem FeedbacksNN Cat/DogEncryption BlockNN Cat/Dog V2Text with Color LegendSuperscript/SubscriptDanyas playgroundTemporary Hint/Video TutorialTemporary Hint/Solution/Video Tutorial
7. Text Boxes
NoteJokeStudy MorePrompt Input - OutputCopyable Text BoxQuote Text Box+ Code Block - Highlighted & Copyable SQL+ Code Block - Highlighted & Copyable Python+ Code Block - Highlighted & Copyable JavaScript+ Code Block - Highlighted & Copyable Java+ Code Block - Highlighted & Copyable Dart+ Code Block - Highlighted & Copyable C+++ Code Block - Highlighted & Copyable C+ Code Block - Highlighted & Copyable C#File name header Prerequisites Box With LinksDefinition Text BlockAnimated border
Oleh S tests
Hint
<!-- Code Editor lib -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"
/>
<!-- Custom styles -->
<style>
.button-container {
display: flex;
gap: 10px;
}
.button {
color: #ffffff;
background-color: #90adde;
padding: 4px 10px;
border: 2px solid #c8d7f1;
font-weight: 400;
border-radius: 24px;
font-size: 16px;
line-height: 26px;
font-family: 'Play', sans-serif;
cursor: pointer;
transition: 0.5s ease-in-out;
position: relative;
display: inline-flex;
align-items: center;
}
.button::before {
content: '';
display: inline-block;
width: 22px;
height: 23px;
margin-right: 15px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: transform 0.6s ease-in-out;
}
.button:first-child::before {
background-image: url('https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/hint-solution-video-btns/hint-icon.png');
}
.button:last-child::before {
background-image: url('https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/hint-solution-video-btns/solution-icon.png');
}
.button:hover::before,
.button:focus::before {
transform: rotate(360deg);
}
.button:hover,
.button:focus {
background-color: #b1c9ef;
}
.hint-styling-block {
padding: 10px;
background-color: white;
margin-top: 20px;
background-color: white;
line-height: 1.5;
color: black;
font-family: inherit;
border: 2px solid #c8d7f1;
border-radius: 10px;
padding: 10px;
}
.solution-styling-block {
margin-top: 20px;
position: relative;
}
.hint-styling-block,
.solution-styling-block {
display: block;
}
#solution-block {
position: relative;
z-index: 1;
}
.CodeMirror {
height: fit-content;
border-radius: 10px;
z-index: 1;
/*@@ Changes: start */
font-family: Monaco, Ubuntu Mono, sans-serif;
font-size: 18px;
line-height: 25px;
/*@@ Changes: end */
}
.specific {
/*@@ Changes: start */
background-color: #080808 !important;
/*@@ Changes: end */
}
.copy-button {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border: none;
background-color: #2f3747;
border-radius: 5px;
color: #fff;
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
z-index: 1;
}
.CodeMirror-scroll {
max-width: 100%;
}
/*@@ Changes: start */
.cm-s-dracula .CodeMirror-gutters,
.cm-s-dracula.CodeMirror {
background-color: #36445c !important;
color: #dddddd !important;
}
.cm-s-dracula .CodeMirror-linenumber {
color: #808080;
}
.cm-s-dracula span.cm-keyword {
color: #fda331;
}
.cm-s-dracula span.cm-def {
color: #6fb3d2;
}
.cm-s-dracula span.cm-variable {
color: #6fb3d2;
}
.cm-s-dracula span.cm-property {
color: #b5bd68;
}
.cm-s-dracula span.cm-number {
color: #fda331;
}
.cm-s-dracula span.cm-operator {
color: #cc99cc;
}
.cm-s-dracula span.cm-string,
.cm-s-dracula span.cm-string-2 {
color: #b5bd68;
}
.cm-s-dracula span.cm-variable-2 {
color: #6fb3d2;
}
.cm-s-dracula span.cm-atom {
color: #8abeb7;
}
.cm-s-dracula span.cm-comment {
color: #808080;
font-style: italic;
}
.cm-s-dracula span.cm-meta {
color: #8abeb7;
}
.cm-s-dracula span.cm-builtin {
color: #fda331;
}
/*@@ Changes: end */
</style>
<div class="button-container">
<button
class="button"
onclick="toggleBlock1('hint-block1', 'solution-block1')"
>
Hint
</button>
<button
class="button"
onclick="toggleBlock1('solution-block1', 'hint-block1')"
>
Solution
</button>
</div>
<!-- CHANGE THE HINT -->
<div id="hint-block1" class="block hint-styling-block">
1. It is recommended to do ... <br />
2. Use such method <code>some code</code> text again <br />
3. Return te format <br />
</div>
<div id="solution-block1" class="block solution-styling-block">
<!-- CHANGE THE CODE -->
<textarea id="code-1" class="language-java">
import java.io.File; // Import the File class
import java.io.IOException; // Import the IOException class to handle errors
public class CreateFile {
public static void main(String[] args) { try {} catch (IOException e) {} } }
<button class="copy-button" onclick="handleClick1('code-1')"> <svg width="20" height="20" x="0" y="0" viewBox="0 0 32 32" style="enable-background: new 0 0 512 512" xml:space="preserve" class="" > <g> <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6" opacity="1" data-original="#000000" class="" ></path> </g> </svg> </button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script> <!-- Notification lib --> <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script> <script> document.addEventListener('readystatechange', event => { if (event.target.readyState === 'complete') { onPageLoad1(); } }); function onPageLoad1() { var editor = CodeMirror.fromTextArea(document.getElementById('code-1'), { lineNumbers: true, mode: 'text/x-java', theme: 'dracula', }); // ----------> HIGHLIGHT <---------- editor.markText( { line: 0, ch: 0 }, { line: 1, ch: 100 }, { className: 'specific' } ); // Initially hide both the hint and solution blocks hideBlock1('hint-block1'); hideBlock1('solution-block1'); } // Copy Button handler const handleClick1 = codeBlock => { const textarea = document.getElementById(codeBlock); const copiedText = textarea.value; navigator.clipboard.writeText(copiedText); Notiflix.Notify.Success('Copied to clipboard!', { timeout: 2000, width: '260px', position: 'center-top', textColor: '#ff5549', }); }; // Function to toggle the visibility of a block const toggleBlock1 = blockId => { const block = document.getElementById(blockId); if (block.style.display === 'none' || block.style.display === '') { hideBlock1('hint-block1'); hideBlock1('solution-block1'); showBlock1(blockId); } else { hideBlock1(blockId); } }; // Function to show a block const showBlock1 = blockId => { const block = document.getElementById(blockId); block.style.display = 'block'; }; // Function to hide a block const hideBlock1 = blockId => { const block = document.getElementById(blockId); block.style.display = 'none'; }; </script>Tudo estava claro?
Seção 6. Capítulo 6
