迷你数学计算测试小应用

Mini quiz with validation

html5, mobile, app

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1819
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// set ios device for system font fallback
"use strict";

if (navigator.userAgent.match(/(ipad|iphone|ipod)/i) && !window.MSStream) {
    document.documentElement.className += " ios";
}

var question = {
    choice1: 0,
    choice2: 0,
    sum: 0
};

document.addEventListener("DOMContentLoaded", function() {
    // Cache all the document lookups
    var questionBox = document.getElementById('question-box');
    var answer = document.getElementById('answer');
    var answerButton = document.getElementById('answer-button');
    var resetQuestion = document.getElementById('reset-question');
    var choice1 = document.getElementById('choice1');
    var choice2 = document.getElementById('choice2');
    var field = document.querySelector('.field');
    var answerStatus = document.getElementById('answer-status');
    var answerImage = document.getElementById('answer-image');
    // Image SRCs for correct/incorrect
    var answerStatusImage = {
        correct: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/48021/iconmonstr-check.svg",
        error: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/48021/iconmonstr-x-mark.svg"
    };

// Generate a random number given randRange
    var randomNumber = function randomNumber(randRange) {
        return Math.floor(Math.random() * randRange) + 1;
    };

// Reset the questions object with new values
    var setQuestionChoices = function setQuestionChoices() {
        question.choice1 = randomNumber(25);
        question.choice2 = randomNumber(25);
        question.sum = question.choice1 + question.choice2;
    };

// Change text on page using question object
    var setText = function setText() {
        choice1.textContent = question.choice1;
        choice2.textContent = question.choice2;
    };

// Make a new quiz and make input value blank
    var newQuiz = function newQuiz() {
        setQuestionChoices();
        setText();
        answer.value = '';
    };

// Check to see if value is equal to question object sum
    var checkAnswer = function checkAnswer(val) {
        if (question.sum == val) {
            handleCorrect();
        } else {
            handleError();
        }
    };

// handle correct answer
    var handleCorrect = function handleCorrect() {
        field.classList.add('input-correct');

// animate the answer status
        answerStatus.classList.add('answer-status--show');
        animate({
            el: answerStatus,
            opacity: 1,
            translateY: [-30, 0],
            delay: 200
        });

// animate the correct icon
        answerImageAnimation(answerStatusImage.correct);
    };

// handle error answer
    var handleError = function handleError() {
        field.classList.add('input-error');

// animate the incorrect icon
        answerImageAnimation(answerStatusImage.error);
    };

var answerImageAnimation = function answerImageAnimation(img) {
        answerImage.src = img;
        answerImage.style.display = "block";
        animate({
            el: answerImage,
            opacity: 1,
            scale: [0, 1],
            easing: "easeOutElastic 100",
            delay: 200
        });
    };

// Finally! Let's make a new quiz.
    newQuiz();

// animate the question box
    animate({
        el: questionBox,
        opacity: 1,
        scale: [0, 1],
        duration: 200,
        delay: 500,
        begin: show
    });

// animate the question
    animate({
        el: document.querySelector('.answer-question'),
        opacity: 1,
        translateY: [30, 0],
        delay: 700
    });

// initial change of question box to fade in
    var show = function show() {
        return questionBox.style.display = "block";
    };
    show();

// Focus the input since it's the only on the page
    answer.focus();

// Let's check the answer on click of the submit button
    answerButton.addEventListener('click', function(event) {
        checkAnswer(answer.value);
        event.preventDefault();
    });

// Semi toggle submit button on enter keydown
    document.onkeydown = function(e) {
        e.keyCode == 13 ? answerButton.classList.add('active') : false;
    };

// Untoggle submit active and check answer on enter
    document.onkeyup = function(e) {
        if (e.keyCode == 13) {
            answerButton.classList.remove('active');
            checkAnswer(answer.value);
        }
    };

// Cleanup any state status of input
    var clearFieldStatus = function clearFieldStatus() {
        field.classList.remove('input-correct', 'input-error');
        animate({
            el: answerImage,
            scale: [1.25, 0],
            opacity: 0,
            delay: 100
        });

// hide the answer status if in view
        if (answerStatus.classList.contains('answer-status--show')) {
            answerStatus.classList.remove('answer-status--show');
            animate({
                el: answerStatus,
                opacity: 0,
                translateY: [0, -30],
                delay: 500
            });
        }
    };

// If the input is being changed & the field has a status
    answer.addEventListener('input', function() {
        if (answer.value.length && field.classList.contains('input-correct') || field.classList.contains('input-error')) {
            clearFieldStatus();
        }
    });

// make a new quiz!
    resetQuestion.addEventListener('click', function() {
        newQuiz();
        clearFieldStatus();
        answerStatus.classList.remove('answer-status--show');
        animate({
            el: answerStatus,
            opacity: 0,
            translateY: [0, -30],
            easing: "easeInElastic 100"
        });
    });
});

编译

CSS

body {
    background: #eee;
    font-family: sans-serif;
    font: caption;
    color: #222;
}
.ios body {
    font-family: "-apple-system", "HelveticaNeue", sans-serif;
}
h3 {
    font-weight: bold;
    font-size: 1.25em;
    margin-bottom: .5em;
}
em {
    font-style: italic;
}
.mt-med {
    margin-top: .5em;
}
.mr-sml {
    margin-right: .25em;
}
.wrapper {
    height: 100vh;
}
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flex-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
.question-box {
    max-width: 300px;
    display: none;
    opacity: 0;
}
p {
    font-size: 1em;
}
input {
    border: 1px solid #999;
    padding: .75em;
    border-radius: 2px;
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
    box-shadow: inset 0 0 0;
    box-shadow: 0 0 2px #ddd;
    font-size: 1.1em;
    margin: 0 .5em 0 0;
}
input:focus {
    outline: none;
    border: 1px solid #1CB4D9;
}
.button {
    display: inline-block;
    text-decoration: none;
    padding: .75em 1em;
    border-radius: 2px;
    font-size: 1.1em;
    border: 0px;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
}
.button:focus {
    outline: none;
}
.button__submit {
    background-color: #15819C;
    color: #fff;
}
.button__submit:hover {
    background-color: #1997b7;
}
.button__submit:active,
.button__submit.active {
    background-color: #116b81;
    box-shadow: inset 0 0 2px #106074;
}
.answer-form,
.answer-form:after {
    z-index: 10;
    position: relative;
}
.answer-question {
    opacity: 0;
}
.answer-status {
    opacity: 0;
    z-index: 5;
}
.answer-status__link {
    text-decoration: dotted;
    color: #1B9BBA;
}
.field {
    position: relative;
}
.field .answer-input {
    position: relative;
}
.field .answer-input__image {
    position: absolute;
    display: none;
    opacity: 0;
    top: 7px;
    right: 12px;
}
.input-correct input {
    border: 1px solid #44D24F;
}
.input-error input {
    border: 1px solid #D24444;
}

HTML

Mini quiz with validation

html5, mobile, app

编辑器支持Emmet

快捷键

Mini quiz with validation

html5, mobile, app

使用AngularJS实现的数学加减乘除可视化计算器

HTML5健身应用基础代谢率和卡路里计算器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：