start [Biases & Fallacies]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>

<head>

    <script>
        function redirectPage(url) {
            window.location.href = url;
        }

        function removeBootstrapStyle() {
            [...document.getElementsByClassName("button btn")].forEach(e => e.className = "button");
            [...document.getElementsByClassName("title page-header pb-3 mb-4 mt-0")].forEach(f => f.className = "title");
            [...document.getElementsByClassName("title")].forEach(e => {
            e.className = `${e.className} ${e.id}`;
            e.removeAttribute('id');
            });
            [...document.getElementsByClassName("title")].filter(e => e.className == "title ")[0].className = "title line";
            [...document.getElementsByClassName("anchorjs-link ")].forEach(e => e.remove());
        }
    </script>
    <style>
        .button {
            width: 400px;
            height: 400px;
            background-color: none;
            position: relative;
            overflow: hidden;
            margin: 3px;
        }
        
        @media only screen and (max-width: 767px) {
            .button {
            margin: 0;
  transform: scale(0.7, 0.7) translate(-20%, -20%);
  -ms-transform: scale(0.7, 0.7) translate(-20%, -20%); /* IE 9 */
  -webkit-transform: scale(0.7, 0.7) translate(-20%, -20%); /* Safari and Chrome */
  -o-transform: scale(0.7, 0.7) translate(-20%, -20%); /* Opera */
  -moz-transform: scale(0.7, 0.7) translate(-20%, -20%); /* Firefox */
}
        }
        
        .image {
            position: absolute;
            width: 100%;
            height: 100%;
            filter: blur(0px);
            transition: filter 0.5s;
        }

        .title {
            font-family: 'Arial', sans-serif;
            position: absolute;
            top: -3%;
            left: 5%;
            font-size: 36px;
            color: white;
            font-weight: 650;
        }

        .description {
            line-height: 1.3;
            position: absolute;
            top: 15%;
            left: 5%;
            font-size: 21px;
            color: white;
            opacity: 0;
            transition: opacity 0.2s;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 330px;
            color: #e7e7e7;
            font-weight: 900;
        }

        .title.creative {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s, color 1.25s;
            color: #e7e7e7;
        }

        .title.and {
            position: absolute;
            left: 33.3%;
            opacity: 0;
            transition: opacity 0.2s;
            color: #e7e7e7;
        }

        .title.writing {
            position: absolute;
            left: 52%;
            opacity: 0;
            transition: opacity 0.2s, left 0.2s, color 1.25s;
            color: #e7e7e7;
        }

        .title.biases {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s, color 1s;
            color: #e7e7e7;
        }

        .title.experiments {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s, color 1s;
            color: #e7e7e7;
        }

        .title.and-1 {
            position: absolute;
            left: 39%;
            opacity: 0;
            transition: opacity 0.2s;
            color: #e7e7e7;
        }

        .title.society {
            position: absolute;
            left: 64%;
            opacity: 0;
            transition: opacity 0.2s, left 0.2s;
            color: #a8cff0;
        }

        .title.about {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s, color 1s;
            color: #e7e7e7;
        }

        .title.line {
            position: absolute;
            left: 40%;
            opacity: 0;
            transition: opacity 0.2s;
            color: #e7e7e7;
        }

        .title.workplace {
            position: absolute;
            left: 50%;
            opacity: 0;
            transition: opacity 0.2s, left 0.2s;
            color: #efdba5ff;
        }
        
        .title.fallacies {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s, color 1s;
            color: #e7e7e7;
        }
        
        .title.coding {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s, color 1s;
            color: #e7e7e7;
        }

        .overlay {
            width: 100%;
            height: 20%;
            background-color: #ff5800;
            position: absolute;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.4s cubic-bezier( 0, 0, 0.3, 1 ), background-color 1s, opacity 0.9s;
            opacity: 0.7;
        }

        .overlay.two {
            top: 20%;
            background-color: #f62b4c;
            transform-origin: right;
            transition-delay: 80ms;
        }

        .overlay.three {
            top: 40%;
            background-color: #a1378b;
            transition-delay: 240ms;
        }

        .overlay.four {
            top: 60%;
            background-color: #2b4279;
            transform-origin: right;
            transition-delay: 400ms;
        }

        .overlay.five {
            top: 80%;
            background-color: #003a59;
            transition-delay: 560ms;
        }

        .button:hover {
            cursor: pointer;
        }


        .button:hover .image {
            filter: blur(10px);
            transition: filter 0.9s;
        }

        .button:hover .overlay {
            transform: scaleX(1);
            background-color: black;
            opacity: 0.5;
        }

        .button:hover .title.creative {
            transition: top 0.2s, opacity 0.2s, color 1.25s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
            color: #ff9152;
        }

        .button:hover .title.and {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1s;
        }

        .button:hover .title.writing {
            transition: left 0.2s, opacity 0.2s, color 1.25s;
            transition-delay: 1s;
            opacity: 1;
            left: 43%;
            color: #ff9152;
        }

        .button:hover .title.biases {
            transition: top 0.2s, opacity 0.2s, color 1s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
            color: #55dde2;
        }

        .button:hover .title.experiments {
            transition: top 0.2s, opacity 0.2s, color 1s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
            color: #df8af2;
        }

        .button:hover .title.about {
            transition: top 0.2s, opacity 0.2s, color 1s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
            color: #f6f865;
        }

        .button:hover .title.fallacies {
            transition: top 0.2s, opacity 0.2s, color 1s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
            color: #ff66c2;
        }

        .button:hover .title.coding {
            transition: top 0.2s, opacity 0.2s, color 1s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
            color: #7cd962;
        }

        .button:hover .description.oneWordTitle {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1s;
        }
        
        .button:hover .description.twoWordTitle {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1.25s;
        }

        .button:hover .description.genderAndSociety {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1.5s;
        }

        .button {
            float: left;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body onload="removeBootstrapStyle()">
<div onclick="redirectPage('https://renickbell.net/ed/fallacies/doku.php?id=biases')" class="button">
        <img class="image" src="https://renickbell.net/ed/fallacies/lib/exe/fetch.php?media=button-bias.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title biases">Biases</h1>
        <p class="description oneWordTitle">Cognitive bias is a mental shortcut your brain uses to make judgments quickly and efficiently. It basically takes what you already know and uses it to fill in the blanks when encountering new information.</p>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/fallacies/doku.php?id=fallacies')" class="button">
        <img class="image" src="https://renickbell.net/ed/fallacies/lib/exe/fetch.php?media=button-fallacy.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title fallacies">Fallacies</h1>
        <p class="description oneWordTitle">Cognitive fallacies are errors in thinking that can lead to illogical conclusions. They happen when our brains take shortcuts or make assumptions that aren't necessarily true.</p>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/fallacies/doku.php?id=logic-stories')" class="button">
        <img class="image" src="https://renickbell.net/ed/fallacies/lib/exe/fetch.php?media=button-stories.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title creative">Creative</h1>
        <h1 class="title writing">Writing</h1>
        <p class="description twoWordTitle">Our students imagined and wrote interesting stories that utilized vocabulary words from a big “must know” list. At the same time, these stories illustrated and taught readers about some common cognitive biases and logical fallacies, information which is also increasingly important for the youth of today.</p>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/fallacies/doku.php?id=experiments-on')" class="button">
        <img class="image" src="https://renickbell.net/ed/fallacies/lib/exe/fetch.php?media=button-experiments.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title experiments">Experiments</h1>
        <p class="description oneWordTitle">After learning about some interesting and common biases and fallacies from previously established research, the students created and conducted their own experiments to see if the biases and fallacies are “real”.</p>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/fallacies/doku.php?id=coding')" class="button">
        <img class="image" src="https://renickbell.net/ed/fallacies/lib/exe/fetch.php?media=button-coding.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title coding">Coding</h1>
        <p class="description oneWordTitle">While improving our logical thinking skills, we also practiced that through a variety of independent projects in programming. From using code to generate images of butterflies to making autonomous systems that can produce music, we continued to develop our coding abilities.</p>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/fallacies/doku.php?id=about-program')" class="button">
        <img class="image" src="https://renickbell.net/ed/fallacies/lib/exe/fetch.php?media=button-about.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title about">About</h1>
        <p class="description oneWordTitle">This program is an experimental education initiative training students in the cross-domain transferable skills and abilities that will be needed to face the uncertain and complex challenges of the future world.</p>
    </div>
</body>

</html>