الكود متعوب عليه يا شباب ، عطونا رايكم
كود:
<div class="container">
<h1>Quiz App</h1>
<div id="quiz"></div>
<div id="result" class="result"></div>
<center>
<button id="submit" class="button">Submit</button>
</center>
<button id="retry" class="button hide">Retry</button>
<button id="showAnswer" class="button hide">Show Answer</button>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: #b9b3a9;
display: flex;
justify-content: center;
}
.container {
width: 450px;
padding: 20px;
margin-top: 80px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
h1 {
text-align: center;
}
.question {
font-weight: bold;
margin-bottom: 10px;
}
.options {
margin-bottom: 20px;
}
.option {
display: block;
margin-bottom: 10px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #428bca;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.3s;
margin-right: 10px;
}
.button:hover {
background-color: #3071a9;
}
.result {
text-align: center;
margin-top: 20px;
font-weight: bold;
}
.hide{
display: none;
}</style>
<script>
const quizData = [
{
question: 'Which 3 levels in OSI Model are usually implemented in the software within the operating system?',
options: [' Data Link, Transport, Application', ' Transport, Session, Presentation', ' Application, Presentation, Session'],
answer: ' Application, Presentation, Session',
},
{
question: 'Which of these protocols reside in Layer 3 - Network in the OSI Model?',
options: [' IP and IPSec', ' TCP and IPSec', ' IP and TCP'],
answer: ' IP and IPSec',
},
{
question: 'A netmask can be represented by which two ways?',
options: [' Slash Notation (80.212.212.50/32) and Pound Notation (80.2012.212.50#24)', ' Decimal Numbers (Netmask: 255.255.255.0) and Slash Notation (80.212.212.50/32)', ' Pound Notation (80.2012.212.50#24) and Decimal Numbers (Netmask: 255.255.255.0)'],
answer: ' Decimal Numbers (Netmask: 255.255.255.0) and Slash Notation (80.212.212.50/32)'
},
{
question: 'Which is the broadcast address in this network: 172.16.24.0/24',
options: ['172.16.24.255','172.16.24.0','172.16.24.1'],
answer: '172.16.24.255',
},
{
question: 'Which one of these is a RFC 1918 ip address?',
options: [
'172.17.1.30',
'9.0.01',
'172.16.1.30',
],
answer: '172.16.1.30',
},
{
question: 'Shortening an IPv6 address means:',
options: [' Removing unused groups of hexadecimal numbers',' Converting 8 groups of 4 hexadecimal numbers into a valid IPv4 address',' Removing a group of only 0\'s'],
answer: ' Removing a group of only 0\'s',
},
{
question: 'What is spoofing?',
options: [
' A way server hides from attacks, a defensive mechanics',
' A way of terminating a 3-way handshake connection',
' Falsifying data, making something appear different than they really are',
],
answer: ' Falsifying data, making something appear different than they really are',
},
{
question: 'What is Zero-Trust architecture?',
options: [' A network where all systems/resources need explicit access to be able to communicate', ' A network where only some resources/devices are trusted', ' A network where we do not trust public network(internet), but we trust local network'],
answer: ' A network where all systems/resources need explicit access to be able to communicate',
},
{
question: 'You need an IDS (Intrusion Detection System) in addition to IPS (Intrusion Prevention System) to be able to both detect and prevent access',
options: [
' Neither of the other options are correct',
' False. IPS is also able to detect if positioned correctly in the network',
' True. IDS and IPS are two separate product or devices, with designed roles on different parts of the network. IDS tells the IPS to block/prevent.',
],
answer: ' False. IPS is also able to detect if positioned correctly in the network',
},
{
question: 'To be able to detect and block specific file types/documents to be blocked from downloading from the internet, with a firewall, you need:',
options: [' A Next-Generation Firewall with layer 7 features',' A Next-Generation Firewall with layer 6 features', ' A Next-Generation Firewall with phaser features'],
answer: ' A Next-Generation Firewall with layer 7 features',
},
{
question: 'A cookie can not be used to control a users session/state',
options: [' False. Cookies are often used for tracking sessions', ' True, only supercookies have this feature'],
answer: ' False. Cookies are often used for tracking sessions',
},
{
question: 'Which types of packets can be used to determine if a system is alive on the network?',
options: [' ICMP Echo Request, ICMP Timestamp Request, TCP SYN, TCP ACK', ' ICMP handshake Request, TCP ACK, NMAP', ' ICMP Echo Request, TCP SYN, SW-1TCH, ICMP Timestamp Request'],
answer: ' ICMP Echo Request, ICMP Timestamp Request, TCP SYN, TCP ACK',
},
{
question: 'ARP Scanning can only be used to identify hosts/systems on the LAN',
options: ['True', 'False'],
answer: 'True',
},
{
question: 'NMAP Timing options (-T) can be used to to avoid detection by',
options: [' Limit speed on how fast hosts are scanned', ' Choose when to scan. E.g. only scan during the night', ' Timing option is used to time a scan to CPU clocks, so they are in sync, for more efficient scanning'],
answer: ' Limit speed on how fast hosts are scanned',
},
{
question: 'What is a strobe of data?',
options: [' Small amount of traffic trying to hide from detecting', ' A sudden increase of traffic in the network'],
answer: ' A sudden increase of traffic in the network',
},
{
question: 'What is IDOR?',
options: [' Insecure Direct Object Reference', ' Insecure Door or Room', ' Invalid Data or Reference'],
answer: ' Insecure Direct Object Reference',
},
{
question: 'What is SQL injection?',
options: [' It is used to inject malicious code to a database server, through a query', ' It is used to spoof or inject false headers in a HTTP request', ' It is used in Buffer Overflow attacks to overwrite memory'],
answer: ' It is used to inject malicious code to a database server, through a query',
},
{
question: 'What is best practice in defending against SQL injection?',
options: [' Blocking specific ports that SQL injections are usually attacked via', ' Programmers will not make web applications that allow user input', ' Sanitizing users input in a web application'],
answer: ' Sanitizing users input in a web application',
},
{
question: 'What is CSP - Content Security Policy?',
options: [' TLS encryption between server and client', ' A strict way of sanitizing user input on a website', ' A strict way of controlling where javascript is allowed to be executed from'],
answer: ' A strict way of controlling where javascript is allowed to be executed from',
},
{
question: 'Which order of security protocols is correct, going from least to most secure?',
options: [' WEP, WPA, WPA2, WPA3', ' WPA, WEP, WPA2, WPA3', ' WPA, WPA2, WPA3, WEP'],
answer: ' WEP, WPA, WPA2, WPA3',
},
{
question: 'Using the same strong password, with high entropy, on multiple sites is good practice',
options: [' False. If one site is breached/hacked and stores passwords in clear text, your password is now in hackers hands', ' True. Storing passwords in clear text in database is no longer practiced and are now only using strong encryption'],
answer: ' False. If one site is breached/hacked and stores passwords in clear text, your password is now in hackers hands',
},
{
question: 'SIEM is commonly used to',
options: [' Do a real-time analysis of security alerts generated by applications, hosts and network hardware', ' Secure the servers that are hosted in the cloud', ' Preventively block attacks against networks'],
answer: ' Do a real-time analysis of security alerts generated by applications, hosts and network hardware',
},
{
question: 'Classifications of incidents should generally be according to',
options: [' Category, sensitivity, criticality', ' Category, sensitivity, criticality, SLA', ' Category, sensitivity, criticality, SLA, contact channel'],
answer: ' Category, sensitivity, criticality',
},
{
question: 'The 6 stages of PICERL are:',
options: [' Preparation, Identification, Containment, Eradication, Recovery, Lessons Learned', ' Preparation, Identification, Containment, Eradication, Recovery, Payment', ' Preparation, Identification, Containment, Eradication, Recovery, Vacation'],
answer: ' Preparation, Identification, Containment, Eradication, Recovery, Lessons Learned',
},
{
question: 'In which phase of PICERL is blocking attackers usually done?',
options: [' Eradication', ' Identification', ' Preparation', ' Containment'],
answer: ' Containment',
},
];
const quizContainer = document.getElementById('quiz');
const resultContainer = document.getElementById('result');
const submitButton = document.getElementById('submit');
const retryButton = document.getElementById('retry');
const showAnswerButton = document.getElementById('showAnswer');
let currentQuestion = 0;
let score = 0;
let incorrectAnswers = [];
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function displayQuestion() {
const questionData = quizData[currentQuestion];
const questionElement = document.createElement('div');
questionElement.className = 'question';
questionElement.innerHTML = questionData.question;
const optionsElement = document.createElement('div');
optionsElement.className = 'options';
const shuffledOptions = [...questionData.options];
shuffleArray(shuffledOptions);
for (let i = 0; i < shuffledOptions.length; i++) {
const option = document.createElement('label');
option.className = 'option';
const radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'quiz';
radio.value = shuffledOptions[i];
const optionText = document.createTextNode(shuffledOptions[i]);
option.appendChild(radio);
option.appendChild(optionText);
optionsElement.appendChild(option);
}
quizContainer.innerHTML = '';
quizContainer.appendChild(questionElement);
quizContainer.appendChild(optionsElement);
}
function checkAnswer() {
const selectedOption = document.querySelector('input[name="quiz"]:checked');
if (selectedOption) {
const answer = selectedOption.value;
if (answer === quizData[currentQuestion].answer) {
score++;
} else {
incorrectAnswers.push({
question: quizData[currentQuestion].question,
incorrectAnswer: answer,
correctAnswer: quizData[currentQuestion].answer,
});
}
currentQuestion++;
selectedOption.checked = false;
if (currentQuestion < quizData.length) {
displayQuestion();
} else {
displayResult();
}
}
}
function displayResult() {
quizContainer.style.display = 'none';
submitButton.style.display = 'none';
retryButton.style.display = 'inline-block';
showAnswerButton.style.display = 'inline-block';
resultContainer.innerHTML = `You scored ${score} out of ${quizData.length}!`;
}
function retryQuiz() {
currentQuestion = 0;
score = 0;
incorrectAnswers = [];
quizContainer.style.display = 'block';
submitButton.style.display = 'inline-block';
retryButton.style.display = 'none';
showAnswerButton.style.display = 'none';
resultContainer.innerHTML = '';
displayQuestion();
}
function showAnswer() {
contener_height = 400
for (var _height = 0; _height < score; _height++) {
contener_height = (_height*300)
}
var style_show_answer = `.container {height:${contener_height} ;}`
var contener_style_height = document.createElement("style")
contener_style_height.innerText = style_show_answer
document.head.appendChild(contener_style_height)
quizContainer.style.display = 'none';
submitButton.style.display = 'none';
retryButton.style.display = 'inline-block';
showAnswerButton.style.display = 'none';
let incorrectAnswersHtml = '';
for (let i = 0; i < incorrectAnswers.length; i++) {
incorrectAnswersHtml += `
<hr>
<p>
<strong style="color:darkcyan;">Question:</strong> ${incorrectAnswers[i].question}<br>
<strong style="color:brown;">Your Answer:</strong> ${incorrectAnswers[i].incorrectAnswer}<br>
<strong style="color:green;">Correct Answer:</strong> ${incorrectAnswers[i].correctAnswer}
</p>
`;
}
resultContainer.innerHTML = `
<p>You scored ${score} out of ${quizData.length}!</p>
<p style="color:red;">Incorrect Answers:</p>
${incorrectAnswersHtml}
`;
}
submitButton.addEventListener('click', checkAnswer);
retryButton.addEventListener('click', retryQuiz);
showAnswerButton.addEventListener('click', showAnswer);
displayQuestion();</script>
</div>
التعديل الأخير:
