cringe baby

css/style.css

@@ -38,6 +38,7 @@ body {
     left: 0px;
     width: 100vw;
     height: 100vh;
+    z-index: 1; /*hide baby*/
 }
 
 #playBegin {
@@ -56,7 +57,15 @@ body {
 .floatleft {
     position: absolute;
     left: 2%;
-    top: 5%;
+    top: 20%;
+    width: 20%;
+
+    display: none;
+}
+.floatright {
+    position: absolute;
+    right: 2%;
+    bottom: 5%;
     width: 20%;
 
     display: none;

index.html

@@ -52,6 +52,9 @@
                 <source src="assets/video/desaprovar.mp4" type="video/mp4">
             </video>                 
         </div>        
+        <div id="bbchacha" class="floatright">
+            <img src="assets/img/bbchacha.gif">
+        </div>
         <div id="wrong" class="floattop">
             <img src="assets/img/wrong.png">
         </div>

js/main.js

@@ -51,7 +51,7 @@ function displayQuestion() {
         var index = 0;
 
         // sends comrad Dwayne to help (or calls him back)
-        if (total > 4000 ) {
+        if (total > 4000 ) { // comes when low score
             $("#rock-approves").hide();
             $("#rock-disapproves").hide();            
         }
@@ -60,6 +60,12 @@ function displayQuestion() {
             $("#rock-approves").show();
         } 
         // **************************************
+        // sends comrad baby cha-cha to help (or calls him back)
+        if ( indexesProgress != 0 ) // comes when first question
+            $("#bbchacha").hide(); 
+        else
+            $("#bbchacha").show();
+        // **************************************        
 
         if (indexesProgress < indexeslist.length) {
             index = indexeslist[indexesProgress];