ホーム エクスプローラ ヘルプ
サインイン
olga_pushkar
/
javascript
Watch 1
Star 0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

module

Olga1108 4 年 前
親
9127dd1e2a
コミット
09ed1c29cd
7 ファイル変更、551 行追加、0 行削除
分割表示 差分情報を表示
  1. 153 0
      myDraft test/all.css
  2. 58 0
      myDraft test/index.html
  3. 101 0
      myDraft test/index.js
  4. 10 0
      myDraft test/localStorageConstructor.js
  5. 68 0
      myDraft test/quizConstructor.js
  6. 102 0
      myDraft test/quizzes.js
  7. 59 0
      myDraft test/timer.js

+ 153 - 0
myDraft test/all.css
ファイルの表示 

@@ -0,0 +1,153 @@
 
+*,
 
+*:before,
 
+*:after {
 
+	box-sizing: border-box;
 
+}
 
+html, body {
 
+    height: 100%;
 
+	margin: 0;
 
+}
 
+body{
 
+	font-size: 20px;
 
+	font-family: sans-serif;
 
+	color: #333;
 
+}
 
+p {
 
+    margin: 0 0 15px 0;
 
+}
 
+span {
 
+    padding-left: 5px;
 
+    color: #2e2e2e;
 
+}
 
+
 
+.main-header {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    background-image: url(https://storge.pic2.me/cm/3840x2160/920/58710da961397.jpg);
 
+    color: white;
 
+}
 
+.content {
 
+    overflow: hidden;
 
+	margin: 20px 80px;
 
+}
 
+
 
+.content-header {
 
+    overflow: hidden;
 
+    margin: 20px 20px;
 
+    text-align: center;
 
+    color: rgb(112, 112, 112);
 
+}
 
+
 
+#quiz {
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: center;
 
+    align-items: center;
 
+}
 
+.card {
 
+    margin: 5px 20px 50px 20px;
 
+    width: 50%;
 
+	padding: 15px 15px 15px;
 
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
 
+	border-radius: 15px;
 
+	text-align: center;
 
+	position: relative;
 
+	display: flex;
 
+	flex-direction: column;
 
+	justify-content: space-between;
 
+    align-items: center;
 
+    color: rgb(90, 89, 89);
 
+}
 
+.question{
 
+	font-weight: 600;
 
+}
 
+.answers {
 
+    margin-bottom: 20px;
 
+    padding-top: 15px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+}
 
+#create_constructor, #submit{
 
+	font-family: sans-serif;
 
+	font-size: 20px;
 
+	background-color: #182264;
 
+	color: #fff;
 
+	border: 0px;
 
+	border-radius: 3px;
 
+	padding: 15px 60px;
 
+	cursor: pointer;
 
+	margin-bottom: 20px;
 
+}
 
+#submit:hover{
 
+	background-color: #1c2fa8;
 
+}
 
+.button-block {
 
+    display: flex;
 
+    justify-content: center;
 
+}
 
+.button {
 
+    margin-top: 20px;
 
+    margin-bottom: 16px;
 
+    padding: 15px 60px;
 
+    background-color: #ad0000;
 
+	color: white;
 
+	font-size: 20px;
 
+    font-weight: 700;
 
+    border: none;
 
+    cursor: pointer;
 
+}
 
+.countdown {
 
+    font-family: sans-serif;
 
+    color: #fff;
 
+    display: inline-block;
 
+    font-weight: 100;
 
+    text-align: center;
 
+    font-size: 30px;
 
+  }
 
+   
+.countdown-number {
 
+    padding: 10px;
 
+    border-radius: 3px;
 
+    background: #1c2fa8;
 
+    display: inline-block;
 
+    
+  }
 
+   
+.countdown-time {
 
+    padding: 10px;
 
+    border-radius: 3px;
 
+    background: #182264;
 
+    display: inline-block;
 
+    color: #fff;
 
+  }
 
+   
+.countdown-text {
 
+    display: block;
 
+    padding-top: 5px;
 
+    font-size: 16px;
 
+    color: #fff;
 
+  }
 
+
 
+  h4, h5, .test-again {
 
+      text-align: center;
 
+  }
 
+  @media (max-width: 1199px) {
 
+    .content-header {
 
+        margin: 0;
 
+    }
 
+
 
+    .content {
 
+        margin: 0;
 
+    }
 
+
 
+    .card {
 
+        width: 95%;
 
+        margin: 10px;
 
+    }
 
+
 
+    .button {
 
+        margin-bottom: 10px;
 
+    }
 
+}

+ 58 - 0
myDraft test/index.html
ファイルの表示 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="UTF-8">
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 
+        <link href="all.css" rel="stylesheet">
 
+        <title>English Quizzes</title>
 
+    </head>
 
+    <body> 
+        <div class="wrapper">
 
+            <header class="main-header">
 
+                <h2>English Quizzes</h2>
 
+                <h3>Grammar: Used to, get used to & be used to.</h3>
 
+            </header>
 
+            <main class="main">
 
+                <section class="content">
 
+                    
+                    <header class="content-header">
 
+                        <div class="time">There are 10 questions in this quiz. You have 1 minute to answer all questions.</div>
 
+                        <div id="button-block" class="button-block">
 
+                            <button id="btnStart" class="button" type="button">Start</button>
 
+                        </div>
 
+                        <div id="countdown" class="countdown">
 
+                        
+                            <div class="countdown-number">
 
+                                <span class="minutes countdown-time"></span>
 
+                                <span class="countdown-text">Minutes</span>
 
+                            </div>
 
+                            <div class="countdown-number">
 
+                                <span class="seconds countdown-time"></span>
 
+                                <span class="countdown-text">Seconds</span>
 
+                            </div>
 
+                        </div>
 
+                    </header>
 
+
 
+                    <div id="quiz"></div>
 
+                    <div id="button-block" class="button-block">
 
+                        <button id="submit">Grade Me</button>
 
+                    </div>
 
+                    <div id="button-block" class="button-block">
 
+                        <button id="create_constructor">Create own Quiz</button> 
+                    </div>
 
+                    <div id="results"></div>
 
+                    <div id="quiz_constructor"></div>
 
+                    
+                </section>
 
+            </main>
 
+            <footer class="footer"></footer>
 
+        </div>
 
+        <script src="quizzes.js"></script>
 
+        <script src="index.js"></script>
 
+        <script src="localStorageConstructor.js"></script>
 
+        <script src="timer.js"></script>
 
+        <script src="quizConstructor.js"></script>
 
+    </body>
 
+</html>

+ 101 - 0
myDraft test/index.js
ファイルの表示 

@@ -0,0 +1,101 @@
 
+const quizContainer = document.getElementById('quiz');
 
+const resultsContainer = document.getElementById('results');
 
+const submitButton = document.getElementById('submit')
 
+const createQuizBtn = document.getElementById('create_constructor')
 
+
 
+
 
+ function buildQuiz(){
 
+    
+    const output = [];
 
+  
+    // перебираем вопросы
 
+    myQuestions.forEach(
 
+      (currentQuestion, questionNumber) => {
 
+          const answers = []; 
+  
+        // перебираем ответы
 
+        for(letter in currentQuestion.answers){
 
+  
+          // добавляем радио кнопку
 
+          answers.push(
 
+            `<label>
 
+              <input type="radio" name="question${questionNumber}" value="${letter}">
 
+              ${letter} :
 
+              ${currentQuestion.answers[letter]}
 
+            </label>`
 
+          );
 
+         
+        }
 
+  
+         output.push(
 
+          `<div class="card">
 
+              <div class="question"> ${currentQuestion.question} </div>
 
+              <div class="answers"> ${answers.join('')} </div>
 
+           </div>`
 
+        );
 
+        setAnswersToLS(answers)
 
+      
+      }
 
+    );
 
+  
+    quizContainer.innerHTML = output.join('');
 
+    
+  }
 
+  const setAnswersToLS = (data) => {
 
+    localStorage.setItem('answers', JSON.stringify(data));
 
+  }
 
+  const getAnswersLS = () => {
 
+  const answersLS = JSON.parse(localStorage.getItem('answers'));
 
+  if (answersLS) {
 
+    answersLS.forEach((answer, index) => answers[index] = answer)
 
+    }
 
+  }
 
+
 
+
 
+function showResults(){
 
+
 
+    // контейнер для ответов
 
+    const answerContainers = quizContainer.querySelectorAll('.answers');
 
+  
+    // счётчик правильных ответов
 
+    let numCorrect = 0;
 
+    
+    // для каждого вопроса
 
+    myQuestions.forEach( (currentQuestion, questionNumber) => {
 
+  
+      // находим выбранный ответ
 
+      const answerContainer = answerContainers[questionNumber];
 
+      const selector = `input[name=question${questionNumber}]:checked`;
 
+      const userAnswer = (answerContainer.querySelector(selector) || {}).value;
 
+      const rightAnswer = currentQuestion.correctAnswer;
 
+      
+      // если ответ правильный
 
+      if(userAnswer === rightAnswer){
 
+        // то добавляем к правильным ответам
 
+        numCorrect++;
 
+  
+        // и отмечаем зелёным
 
+        answerContainers[questionNumber].style.color = 'green';
 
+      }
 
+      // если ответ не правильный, или не отмеченный 
+      else  {
 
+        
+       // - тогда красный
 
+        answerContainers[questionNumber].style.color = 'red';
 
+        const correctAnswer = document.createElement('p');
 
+        correctAnswer.innerText=`Correct answer is: ${rightAnswer}`
 
+        answerContainers[questionNumber].appendChild(correctAnswer)
 
+      }
 
+    });
 
+  
+    // показываем результат
 
+    let userTestResult = numCorrect >= 7 ? "passed" : "did not pass";
 
+    resultsContainer.innerHTML = `<h4>You ${userTestResult} the test! <a href="#" class="test-again">Take the test again</a></h4>
 
+                                  <h5>You scored ${numCorrect} out of ${myQuestions.length}</h5>`;
 
+
 
+     document.querySelector('.test-again').onclick = (e) => {
 
+       e.preventDefault();
 
+       localStorage.removeItem('answers');
 
+       location.reload();
 
+     } 
+}

+ 10 - 0
myDraft test/localStorageConstructor.js
ファイルの表示 

@@ -0,0 +1,10 @@
 
+
 
+  const setConstructorToLS = (data) => {
 
+    localStorage.setItem('yourQuiz', JSON.stringify(data));
 
+  }
 
+  const getConstructorLS = () => {
 
+  const questionsLS = JSON.parse(localStorage.getItem('yourQuiz'));
 
+  if (questionsLS) {
 
+    questionsLS.forEach((question, index) => yourQuiz[index] = question)
 
+    }
 
+  }

+ 68 - 0
myDraft test/quizConstructor.js
ファイルの表示 

@@ -0,0 +1,68 @@
 
+const yourQuiz = []
 
+const buildConstructor = () => {
 
+    const templateForm = document.createElement('form')
 
+    templateForm.className = "template_form"
 
+    templateForm.innerHTML = `<fieldset>
 
+                                <legend>Quiz Constructor</legend>
 
+                                <p><label for="titleQuiz">Quiz Title</label><input type="text" id="titleQuiz" placeholder="Enter the title of your Quiz"></p>
 
+                                <p><label for="customerQuestion">Question</label><input type="text" id="customerQuestion" placeholder="Enter a question"></p>
 
+                                <div class="constructor_answers">
 
+                                <p><label>Answers</label></p>
 
+                                <p>
 
+                                <input type="text" id="answer_letter" class="constructor_answer_lettter" placeholder="Enter a letter(ex: a or b or c or d)">
 
+                                <input type="text" class="constructor_answer" placeholder="Enter an answer"></p>
 
+                                </div>
 
+                                <div>
 
+                                    <button type="button" class="add_answer">Add answer</button>
 
+                                </div>
 
+                                <p><label for="correct_answer_letter">Enter the letter of the correct answer(ex: a or b or c or d)</label>
 
+                                <input type="text" id="correct_answer_letter" class="constructor_correct_answer_lettter" placeholder="Enter the letter of the correct answer"></p>
 
+                            </fieldset>
 
+                            <button type="submit" class="add_question" id="add_question">Add a question</button>
 
+    `
 
+
 
+
 
+    document.querySelector('#quiz_constructor').appendChild(templateForm);
 
+    document.querySelector('.add_answer').onclick = (e) => {
 
+        e.preventDefault();
 
+        e.stopPropagation();
 
+        let answerContainer = document.querySelector('.constructor_answers');
 
+        const frame = document.createElement('p');
 
+        frame.innerHTML = `
 
+                            <input type="text" id="answer_letter" class="constructor_answer_lettter" placeholder="Enter a letter">
 
+                            <input type="text" class="constructor_answer" placeholder="Enter an answer">`
 
+        answerContainer.appendChild(frame);                   
+    }
 
+    document.querySelector('.add_question').onclick = (e) => {
 
+        e.preventDefault();
 
+        e.stopPropagation();
 
+        
+        const questionCust = document.querySelector('#customerQuestion').value;
 
+        const letterCust = document.querySelector('.constructor_answer_lettter').value;
 
+        const answerCust = document.querySelector('.constructor_answer').value;
 
+        yourQuiz.push(new Question(questionCust, letterCust, answerCust))
 
+        setConstructorToLS(yourQuiz);
 
+        templateForm.remove();
 
+        buildConstructor();
 
+    }
 
+    console.log(yourQuiz)
 
+}
 
+titleQuiz = document.querySelector('#titleQuiz')
 
+
 
+
 
+class Question {
 
+    constructor(questionCust, answerCust, letterCust) {
 
+        
+    this.question = questionCust;
 
+    this.answers = {letterCust: answerCust};
 
+    this.correctAnswer = document.querySelector('#correct_answer_letter').value;  
+    } 
+   
+}       
+    
+createQuizBtn.onclick = (e) => {
 
+    e.preventDefault();
 
+    e.stopPropagation();
 
+    document.querySelector('#button-block').setAttribute('display', 'none');
 
+    buildConstructor();
 
+}

+ 102 - 0
myDraft test/quizzes.js
ファイルの表示 

@@ -0,0 +1,102 @@
 
+const myQuestions = [
 
+    {
 
+      question: 'I ____ to being spoken to like that!',
 
+      answers: {
 
+        a: 'don\'t get used',
 
+        b: 'used',
 
+        c: 'am not used',
 
+        d: 'use'
 
+      },
 
+      correctAnswer: 'c'
 
+    },
 
+    {
 
+      question: 'I find it hard ____ to the dark evenings in winter.',
 
+      answers: {
 
+        a: 'don\'t get used',
 
+        b: 'used',
 
+        c: 'to getting',
 
+        d: 'to get used'
 
+      },
 
+      correctAnswer: 'd'
 
+    },
 
+    {
 
+      question: 'I haven\'t studied for ages and I\'m finding it hard to get used to ____ every day.',
 
+      answers: {
 
+        a: 'study',
 
+        b: 'studying',
 
+        c: 'studied',
 
+        d: 'being studied'
 
+      },
 
+      correctAnswer: 'b'
 
+    },
 
+    {
 
+      question: 'You\'ll have to get used to ____ on the right when you live there.',
 
+      answers:  {
 
+        a: 'drove',
 
+        b : 'driven',
 
+        c : 'drive',
 
+        d : 'driving'
 
+      },
 
+      correctAnswer: 'd'
 
+  },
 
+  {
 
+      question: 'I found it hard to get used  to ____ in such a hot country.',
 
+      answers: {
 
+        a: 'live',
 
+        b: 'living',
 
+        c: 'lived', 
+        d: 'life'
 
+      },
 
+      correctAnswer: 'b' 
+  },
 
+  {
 
+      question: 'Which sentence is NOT correct?',
 
+      answers: {
 
+        a: 'My grandmother would have long, fair hair.',
 
+        b: 'We would go swimming every Friday',
 
+        c: 'There would be a park here.', 
+        d: 'We would go to the zoo every summer.'
 
+      },
 
+      correctAnswer: 'a'
 
+  },
 
+  {
 
+      question: 'I\'m not used to ____ so much tea.',
 
+      answers:  {
 
+        a: 'drinking',
 
+        b: 'drink',
 
+        c: 'drunk', 
+        d: 'get'
 
+      },
 
+      correctAnswer: 'a'
 
+  },
 
+  {
 
+      question: 'I ____ like football then but I like it now',
 
+      answers: {
 
+        a: 'didn\'t used to',
 
+        b: 'wouldn\'t',
 
+        c: 'didn\'t use to', 
+        d: 'wouldn\'t to'
 
+      },
 
+      correctAnswer: 'c'
 
+  },
 
+  {
 
+      question: 'You can use "would" to talk about...',
 
+      answers:  {
 
+        a: 'past states',
 
+        b: 'past habits (actions)',
 
+        c: 'past habits(actions) and past states', 
+        d: 'events in the past'
 
+      },
 
+      correctAnswer: 'b'
 
+  },
 
+  {
 
+      question: 'You can use "used to" to talk about...(you can choose two or more options)',
 
+      answers: {
 
+        a: 'past habits (actions)',
 
+        b: 'past states',
 
+        c: 'events in the past', 
+        d: 'use of objects'
 
+      },
 
+      correctAnswer: 'b'
 
+  }
 
+  ];

+ 59 - 0
myDraft test/timer.js
ファイルの表示 

@@ -0,0 +1,59 @@
 
+
 
+
 
+// timer
 
+function getTimeRemaining(endtime) {
 
+  let t = Date.parse(endtime) - Date.parse(new Date());
 
+  let seconds = Math.floor((t / 1000) % 60);
 
+  let minutes = Math.floor((t / 1000 / 60) % 60);
 
+ 
+  return {
 
+    'total': t,
 
+    'minutes': minutes,
 
+    'seconds': seconds
 
+  };
 
+}
 
+ 
+function initializeClock(id, endtime) {
 
+    let clock = document.getElementById(id);
 
+  
+    let minutesSpan = clock.querySelector('.minutes');
 
+    let secondsSpan = clock.querySelector('.seconds');
 
+ 
+function updateClock() {
 
+    let t = getTimeRemaining(endtime);
 
+    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
 
+    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
 
+    submitButton.onclick = (e) => {
 
+    e.preventDefault();
 
+    clearInterval(timeinterval);
 
+      clock.innerHTML = '';
 
+      showResults();
 
+  }
 
+    if (t.total <= 0) {
 
+      clearInterval(timeinterval);
 
+      clock.innerHTML = '';
 
+      showResults();
 
+    }
 
+  }
 
+ 
+  updateClock();
 
+  const timeinterval = setInterval(updateClock, 1000);
 
+  return timeinterval;
 
+}
 
+
 
+ 
+let deadline = new Date(Date.parse(new Date()) + 60 * 1000);
 
+//initializeClock('countdown', deadline);
 
+const btnStart = document.getElementById('btnStart');
 
+btnStart.onclick = (e) => {
 
+    e.preventDefault();
 
+    e.stopPropagation();
 
+    initializeClock('countdown', deadline);
 
+    buildQuiz();
 
+    localStorage.setItem('timeinterval', initializeClock('countdown', deadline));
 
+}
 
+const btnGradeMe = document.getElementById('submit');
 
+
 
+window.onload = function () {
 
+    localStorage.removeItem('answers')
 
+}