colorCoder-2

Answer the Penguin Demo remix

:root {
    --penguin-size: 300px;
    --penguin-skin: black;
    --penguin-belly: white;
    --penguin-beak: orange;
  }
  
  @media (max-width: 350px) {
    :root {
      --penguin-size: 200px;
      --penguin-skin: black;   
    }
  }

*:focus { outline: none; } 
 
  body {
    font-family: "montserrat", arial;
    text-align: center;
    background-color: #a3d9ff;
  } 
  
  input, button {
    display: block;
    margin: auto;
  }

input {
   padding: 5px;
   border-radius: 5px;
   border: 1px solid black;
  }

.penguin {
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: var(--penguin-size, 300px);
    height: var(--penguin-size, 300px);
  }
  
  .right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .left-cheek {
    top: 15%;
    left: 5%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .belly {
    top: 60%;
    left: 2.5%;
    background: var(--penguin-belly, white);
    width: 95%;
    height: 100%;
    border-radius: 120% 120% 100% 100%;
  }
  
  .penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, gray);
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .penguin-bottom {
    top: 40%;
    left: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }
  
  .right-hand {
    top: 0%;
    left: 25%;
    background: var(--penguin-skin, black);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 120% 30%;
    transform: rotate(130deg);
    z-index: -1;
    animation-duration: 3s;
    animation-name: wave;
    animation-iteration-count: infinite;
    transform-origin:0% 0%;
    animation-timing-function: linear;
  }
  
  .left-hand {
    top: 0%;
    left: 75%;
    background: var(--penguin-skin, gray);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 30% 120%;
    transform: rotate(-45deg);
    z-index: -1;
  }
  
  .right-feet {
    top: 85%;
    left: 60%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-80deg);
    z-index: -2222;
  }
  
  .left-feet {
    top: 85%;
    left: 25%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(80deg);
    z-index: -2222;
  }
  
  .right-eye {
    top: 45%;
    left: 60%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }
  
  .left-eye {
    top: 45%;
    left: 25%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }
  
  .sparkle {
    top: 25%;
    left:-23%;
    background: white;
    width: 150%;
    height: 100%;
    border-radius: 50%;
  }
  
  .blush-right {
    top: 65%;
    left: 15%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }
  
  .blush-left {
    top: 65%;
    left: 70%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }
  
  .beak-top {
    top: 60%;
    left: 40%;
    background: var(--penguin-beak, orange);
    width: 20%;
    height: 10%;
    border-radius: 50%;
  }
  
  .beak-bottom {
    top: 65%;
    left: 42%;
    background: var(--penguin-beak, orange);
    width: 16%;
    height: 10%;
    border-radius: 50%;
  }
  
  .penguin * {
    position: absolute;
  }

// Create penguin parts
var penguin = document.createElement("div");
var penguin_bottom = document.createElement("div");
var right_hand = document.createElement("div");
var left_hand = document.createElement("div");
var right_feet = document.createElement("div");
var left_feet = document.createElement("div");
var penguin_top = document.createElement("div");
var right_cheek = document.createElement("div");
var left_cheek = document.createElement("div");
var belly = document.createElement("div");
var right_eye = document.createElement("div");
var left_eye = document.createElement("div");
var sparkle1 = document.createElement("div");
var sparkle2 = document.createElement("div");
var blush_right = document.createElement("div");
var blush_left = document.createElement("div");
var beak_top = document.createElement("div");
var beak_bottom = document.createElement("div");

// Add classes to penguin parts
penguin.classList.add("penguin");
penguin_bottom.classList.add("penguin-bottom");
penguin_top.classList.add("penguin-top");
right_hand.classList.add("right-hand");
left_hand.classList.add("left-hand");
right_feet.classList.add("right-feet");
left_feet.classList.add("left-feet");
right_cheek.classList.add("right-cheek");
left_cheek.classList.add("left-cheek");
belly.classList.add("belly");
right_eye.classList.add("right-eye");
left_eye.classList.add("left-eye");
sparkle1.classList.add("sparkle");
sparkle2.classList.add("sparkle");
blush_right.classList.add("blush-right");
blush_left.classList.add("blush-left");
beak_top.classList.add("beak-top");
beak_bottom.classList.add("beak-bottom");

// Add penguin parts
penguin.appendChild(penguin_bottom);
penguin.appendChild(penguin_top);
penguin_bottom.appendChild(right_hand);
penguin_bottom.appendChild(left_hand);
penguin_bottom.appendChild(right_feet);
penguin_bottom.appendChild(left_feet);
penguin_top.appendChild(right_cheek);
penguin_top.appendChild(left_cheek);
penguin_top.appendChild(belly);
penguin_top.appendChild(right_eye);
penguin_top.appendChild(left_eye);
right_eye.appendChild(sparkle1);
left_eye.appendChild(sparkle2);
penguin_top.appendChild(blush_right);
penguin_top.appendChild(blush_left);
penguin_top.appendChild(beak_top);
penguin_top.appendChild(beak_bottom);
document.querySelector(".empty-penguin").appendChild(penguin);

// Create questions - and answers
var q_a = document.querySelector(".q-a");
var question = document.createElement("h1");
var score = 0;
var btn = document.createElement("button");
btn.innerHTML = "Check Your Answer";

function game() {
score = 0;
var answer = document.createElement("input");
answer.setAttribute("answer", "8");
answer.id = "answer-input";
answer.setAttribute("autocomplete", "off");
answer.placeholder = "Type your answer...";
answer.setAttribute("second-answer", "eight");
question.innerHTML = "How many tentacles does an octupus have?";
q_a.appendChild(question);
q_a.appendChild(answer);
q_a.appendChild(document.createElement("br"));
q_a.appendChild(btn);
btn.innerHTML = "Check Your Answer";
btn.setAttribute("style", `font-size: 20px; background-color: #32a852; cursor: pointer;
   color: white;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid #fcba03;`);
// Check answers - and continue
btn.onclick = function() { checkAns1(); }

window.checkAns1 = checkAns1;
window.checkAns2 = checkAns2;
window.checkAns3 = checkAns3;
window.checkAns4 = checkAns4;
window.checkAns5 = checkAns5;
}

var start = document.createElement("button");
start.innerText = "START";
start.style.background = "#ff2626";
start.style.color = "white";
start.onclick = startGame();

function startGame() {
 start.remove();
 game();
}