renge-test

In this example below you will see how to do a renge-test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by guihailiuli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright guihailiuli ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>renge-test</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="test-body personality-test">
    <h1 class="test-header">人格测试</h1>
    <p class="test-note">测试前有三个注意的事项: </p>
     <ol>
        <li>在12分钟内完成。</li>
        <li>诚实回答(即使你不喜欢这个答案)。</li>
        <li>尽量不要选择“中立”的答案。</li>
    </ol>
  
</div>

<div class="progress-wrapper">
    <div class="progress-tick">
    </div>
    <div class="progress">
        <div class="progress-bar">
    </div> 
</div>

<form accept-charset="UTF-8" id="test-form">
        <div class="question-wrapper set1">
            <div class="statement">
                你发现向别人做自我介绍时候有困难。
            </div>
            <div class="row decision">
                 <div class="caption left">同意</div>
                <div class="options btn-group">
<!--                     <span class="caption left">同意</span> -->
                    <label class="btn btn-default option agree max">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    <label class="btn btn-default option agree med">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    <label class="btn btn-default option agree min">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    <label class="btn btn-default option neutral">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    <label class="btn btn-default option disagree min">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    <label class="btn btn-default option disagree med">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    <label class="btn btn-default option disagree max">
                        <input type="radio" name="options" autocomplete="off">
                    </label>
                    
<!--                     <span class="caption right">反对</span> -->
                    
                </div>
               <div class="caption right">反对</div>
                
                
            </div>
    
        </div>
</form>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/guihailiuli/renge-test-BppJJy */
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #FFFFFF;
    font-size: 18px;
    height: 100%;
}

.test-header {
    color: black;
    margin-left: 50%;
    margin-top: 20px;
    text-shadow: 1px 1px 1px gray;
}

.test-note {
    color: #55574D;
    font-size: large;
    margin-left: 30px;
}

ol {
    margin-top: 18px;
    margin-left: 80px;
}

li {
    margin-top: 8px;
    color: #55574D;
}

.progress-wrapper {
    padding: 10px 200px;
}


form {
    display: block;
    margin-top: 30px;
}

/* .question-wrapper {
    margin: 0 auto;
    padding: 30px 0;
    border: 1px solid red;
} */

.question-wrapper .statement {
    text-align: center;
    font-weight: 600;
    padding: 0 15px;
    font-family: "Open Sans", 'Helvetica Neue', Arial
}

.question-wrapper .decision .caption.left {
    float: left;
    color: #4c9070;
    font-weight: 800;
/*     margin-right: 50px; */
}

.question-wrapper .decision .caption.right {
    float: left;
    color: #94657E;
    font-weight: 800;
}

.question-wrapper .decision .options {
    float: left;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 180px;

}

.btn-group {
    vertical-align: middle;
}

.question-wrapper .decision .options .option {
    border-radius: 150px;
    padding: 0;
    margin: 30px;
    cursor: pointer;
    transition: none;
}

.question-wrapper .decision .options .option.max {
    width: 40px;
    height: 40px;
}

.question-wrapper .decision .options .option.med {
    width: 30px;
    height: 30px;
}

.question-wrapper .decision .options .option.min {
    width: 20px;
    height: 20px;
}

.question-wrapper .decision .options .option.neutral {
    width: 16px;
    height: 16px;
}


.question-wrapper .decision .options .option.agree {
    background-color: #fff;
    border: 4px solid #4c9070;
}

.question-wrapper .decision .options .option.agree:hover {
    background-color: #4c9070;
}

.question-wrapper .decision .options .option.disagree {
    background-color: #fff;
    border: 4px solid #94657E;
}

.question-wrapper .decision .options .option.disagree:hover {
    background-color: #94657E;
}

.question-wrapper .decision .options .option.neutral {
    background-color: #fff;
    border: 4px solid grey;
}

.question-wrapper .decision .options .option.neutral:hover {
    background-color: grey;
}

.btn {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

label {
    dispaly: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
}









Comments