Python100dayscourse / part3 /73 - Day 73 - Advanced - Data Visualisation with Matplotlib Programming Languages /010 Programming Language Data Analysis.html
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Quiz</title> | |
| <style> | |
| body { | |
| font-family: sf pro text, -apple-system, BlinkMacSystemFont, Roboto, | |
| segoe ui, Helvetica, Arial, sans-serif, apple color emoji, | |
| segoe ui emoji, segoe ui symbol; | |
| font-weight: 400; | |
| line-height: 22.4px; | |
| font-size: 16px; | |
| } | |
| p, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ul, | |
| ol { | |
| font-size: 16px; | |
| font-weight: 400; | |
| } | |
| ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| max-width: none; | |
| } | |
| code { | |
| background-color: #fff; | |
| border: 1px solid #d1d7dc; | |
| color: #b4690e; | |
| font-size: 90%; | |
| padding: 0.2rem 0.4rem; | |
| } | |
| .quiz-content { | |
| padding: 2.4rem; | |
| word-break: break-word; | |
| max-width: 86rem; | |
| margin: 0 auto; | |
| } | |
| .quiz-container { | |
| margin: 0 auto; | |
| max-width: 84rem; | |
| padding: 0; | |
| } | |
| .question { | |
| margin-bottom: 5rem; | |
| } | |
| .question span { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .question-prompt { | |
| margin-top: 0.8rem; | |
| font-weight: 700; | |
| } | |
| .question-answer { | |
| margin-top: 1.6rem; | |
| padding-left: 0; | |
| box-sizing: border-box; | |
| } | |
| .question-answer label { | |
| max-width: 80rem; | |
| position: relative; | |
| cursor: pointer; | |
| display: flex; | |
| min-width: 18rem; | |
| border: solid #1c1d1f 2px; | |
| } | |
| .question-answer div { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5rem; | |
| width: 100%; | |
| } | |
| .question-answer div:hover { | |
| background-color: #f5f5f5; | |
| } | |
| .question-answer input { | |
| display: none; | |
| } | |
| .question-answer span { | |
| width: 1rem; | |
| height: 1rem; | |
| margin-right: 1.6rem; | |
| top: 0; | |
| border-radius: 50%; | |
| display: inline-block; | |
| flex-shrink: 0; | |
| border: 0.2rem solid #1c1d1f; | |
| position: relative; | |
| } | |
| .selected { | |
| background: #1c1d1f; | |
| box-shadow: 0 0 0 0.4rem #fff inset; | |
| } | |
| .score { | |
| position: fixed; | |
| } | |
| </style> | |
| </head> | |
| <body onload="main()"> | |
| <div id="score" class="score"> | |
| <span>Score: N/A of N/A</span> | |
| </div> | |
| <div id="quiz-container" class="quiz-content"></div> | |
| <script> | |
| const quizData = {"pass_percent": 70, "questions": [{"_class": "assessment", "id": 23400266, "assessment_type": "multiple-choice", "prompt": {"relatedLectureIds": "", "question": "<p>Looking at the data, what was the most popular programming language from 2008 to 2012 by the number of posts?</p>", "answers": ["<p>Python</p>", "<p>Javascript</p>", "<p>Assembly</p>", "<p>C#</p>"], "feedbacks": ["Check the time period...", "", "Check again. Are the colours on the chart confusing? ", "You got it!"]}, "correct_response": ["d"], "section": "", "question_plain": "Looking at the data, what was the most popular programming language from 2008 to 2012 by the number of posts?", "related_lectures": []}, {"_class": "assessment", "id": 23400270, "assessment_type": "multiple-choice", "prompt": {"feedbacks": ["", "", "Nice work! You got it. ", ""], "question": "<p>What was the most popular programming language from 2015 to 2018?</p>", "answers": ["<p>Python</p>", "<p>Java</p>", "<p>Javascript</p>", "<p>PHP</p>"], "relatedLectureIds": ""}, "correct_response": ["c"], "section": "", "question_plain": "What was the most popular programming language from 2015 to 2018?", "related_lectures": []}, {"_class": "assessment", "id": 23400272, "assessment_type": "multiple-choice", "prompt": {"feedbacks": ["", "Bingo", ""], "question": "<p>What was the most popular programming language in 2020?</p>", "answers": ["<p>Javascript</p>", "<p>PYTHON !!!!!! </p>", "<p>Not Python</p>"], "relatedLectureIds": ""}, "correct_response": ["b"], "section": "", "question_plain": "What was the most popular programming language in 2020?", "related_lectures": []}]}; | |
| var correct = 0; | |
| var total = 0; | |
| const questionData = quizData.questions | |
| const passPercent = quizData.pass_percent | |
| function main() { | |
| total = questionData.length; | |
| var questions = []; | |
| for (var i = 0; i < questionData.length; i++) { | |
| var question = questionData[i]; | |
| var questionText = question.prompt.question; | |
| var answers = question.prompt.answers; | |
| var correctAnswer = question.correct_response[0]; | |
| var correctAnswerText = answers[correctAnswer.charCodeAt(0) - 97]; | |
| var questionObj = { | |
| question: questionText, | |
| correctAnswer: correctAnswerText, | |
| answers: answers, | |
| id: question.id, | |
| }; | |
| questions.push(questionObj); | |
| } | |
| updateScore(); | |
| // display the questions | |
| var questionsContainer = document.getElementById("quiz-container"); | |
| for (var i = 0; i < questions.length; i++) { | |
| var question = questions[i]; | |
| var questionElement = document.createElement("form"); | |
| questionElement.className = "question"; | |
| questionElement.innerHTML = | |
| "<span>Question " + | |
| (i + 1) + | |
| ":</span>" + | |
| '<div class="question-prompt">' + | |
| question.question + | |
| "</div>"; | |
| questionElement.id = question.id; | |
| questionElement.classList.add("quiz-container"); | |
| var answersElement = document.createElement("ul"); | |
| answersElement.className = "answers"; | |
| for (var j = 0; j < question.answers.length; j++) { | |
| var answer = question.answers[j]; | |
| var answerElement = document.createElement("li"); | |
| answerElement.className = "answer"; | |
| answerElement.innerHTML = | |
| '<label for="input-' + | |
| question.id + | |
| "-" + | |
| j + | |
| '"><div onclick="select(' + | |
| question.id + | |
| ", " + | |
| j + | |
| ')"><span></span><input id="input-' + | |
| question.id + | |
| "-" + | |
| j + | |
| '" type="radio" name="question' + | |
| i + | |
| '" value="' + | |
| j + | |
| '">' + | |
| answer + | |
| "</input></div></label>"; | |
| answerElement.classList.add("question-answer"); | |
| answersElement.appendChild(answerElement); | |
| } | |
| questionElement.appendChild(answersElement); | |
| // add a submit button | |
| var submitButton = document.createElement("button"); | |
| submitButton.className = "submit"; | |
| submitButton.innerHTML = "Submit"; | |
| submitButton.classList.add("submit-button"); | |
| submitButton.addEventListener("click", function (e) { | |
| e.preventDefault(); | |
| var questionElement = e.target.parentElement; | |
| var questionId = questionElement.id; | |
| var question = questions.filter(function (q) { | |
| return q.id == questionId; | |
| })[0]; | |
| // set the border color of all answers to black | |
| var answers = questionElement.getElementsByClassName("answer"); | |
| for (var i = 0; i < answers.length; i++) { | |
| console.log(answers[i]); | |
| answers[i].children[0].style.borderColor = "#1c1d1f"; | |
| } | |
| var answer = questionElement.querySelector( | |
| 'input[type="radio"]:checked' | |
| ); | |
| if (answer) { | |
| var answerIndex = answer.value; | |
| var answerText = question.answers[answerIndex]; | |
| if (answerText == question.correctAnswer) { | |
| answer.parentElement.parentElement.style.borderColor = | |
| "limegreen"; | |
| // alert("Correct!"); | |
| correct++; | |
| updateScore(); | |
| } else { | |
| answer.parentElement.parentElement.style.borderColor = "red"; | |
| // alert("Incorrect!"); | |
| } | |
| } else { | |
| alert("Please select an answer."); | |
| } | |
| }); | |
| // add button | |
| questionElement.appendChild(submitButton); | |
| questionsContainer.appendChild(questionElement); | |
| } | |
| } | |
| function select(question, answer) { | |
| var questionElement = document.getElementById(question); | |
| var answers = questionElement.getElementsByClassName("answer"); | |
| for (var i = 0; i < answers.length; i++) { | |
| var span = answers[i].children[0].children[0].children[0]; | |
| var input = answers[i].children[0].children[0].children[1]; | |
| span.classList.remove("selected"); | |
| input.checked = false; | |
| } | |
| var span = answers[answer].children[0].children[0].children[0]; | |
| var input = answers[answer].children[0].children[0].children[1]; | |
| span.classList.add("selected"); | |
| input.checked = true; | |
| } | |
| function updateScore() { | |
| var scoreElem = document.getElementById("score"); | |
| const score = (correct / total) * 100; | |
| scoreElem.innerHTML = "Score: " + score + "/" + passPercent + "%"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |