アンケート

同じ結果が表示されるアンケート（テキスト、画像入りチェック）※要javascript(アンケート)

 

Question

  • 1
  • 2
  • 3
  • 4
  • 5

ここには質問が入ります
質問が入ります。

下記Beyondコード

JS head

<!-- タグ設定のJavaScript headに以下をカットして貼り付けてください。
    同一widgetを複数追加する場合、複数回貼付けは不要です。 -->
<script>
    var questionJumpCont = questionJumpCont || {};
    (function(_) {
        const target = '.js-questionJump';

        _.questionCheck = function(el) {
            let questions = el.querySelectorAll('.js-questions');
            let posTop = el.getBoundingClientRect().top + window.pageYOffset;

            questions.forEach(function(question) {
                let checkes = question.querySelectorAll('.js-item');
                let nextBtn = question.querySelector('.js-btn');

                checkes.forEach(function(check, num) {
                    check.addEventListener('change', function() {
                        if (check.type === 'radio') {
                            checkes.forEach(function(check1) {
                                check1.parentNode.classList.remove('checked');
                            })
                            check.parentNode.classList.add('checked');
                        } else if (check.type === 'checkbox') {
                            check.parentNode.classList.toggle('checked');
                        }
                        let parent = check.closest('.answer__items');
                        let visibleItem = parent.nextElementSibling.children;

                        if (check.checked && parent.nextElementSibling.classList.contains('js-selectItems')) {
                            Array.from(visibleItem, function(select) {
                                select.classList.remove('is-active');
                            })
                            parent.nextElementSibling.children[num].classList.add('is-active');
                        }

                        if (check.checked && parent.nextElementSibling.getElementsByClassName('js-btn')) {
                            nextBtn.disabled = false;
                        } else {
                            nextBtn.disabled = true;
                        }
                    })
                })

                nextBtn.addEventListener('click', function() {
                    question.classList.add('is-hidden');
                    question.nextElementSibling.classList.remove('is-hidden');
                    window.scroll({
                        top: posTop,
                        behavior: 'smooth'
                    });
                })
            })
        };

        _.init = function() {
            Array.from(document.querySelectorAll(target), el => {
                _.questionCheck(el);
            })
        };

    })(questionJumpCont);
</script>
<!-- JavaScript headここまで -->

HTML


<!-- HTMLここから -->
<div class="questionJump__area js-questionJump">
    <div class="questionJump__box js-questions">
        <div class="head__box">
            <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" height="380" width="570" draggable="false">
        </div>
        <div class="questionJump__item">
            <div class="num__box">
                <p class="questionHead">Question</p>
                <ul class="items">
                    <li class="item is-active">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                    <li class="item">5</li>
                </ul>
            </div>

            <div class="question__text">
                <p class="text">ここには質問が入ります<br>質問が入ります。</p>
            </div>

            <div class="answer__items">
                <input type="radio" class="js-item" name="q1" id="q1-1">
                <label for="q1-1">選択肢1-1</label>
                <input type="radio" class="js-item" name="q1" id="q1-2">
                <label for="q1-2">選択肢1-2</label>
            </div>
            <button class="nextBtn js-btn" disabled="">次へ</button>
        </div>
    </div>

    <div class="questionJump__box js-questions is-hidden">
        <div class="head__box textHead">
            <p class="questionNum">残り4問です</p>
        </div>
        <div class="questionJump__item">
            <div class="num__box">
                <p class="questionHead">Question</p>
                <ul class="items">
                    <li class="item">1</li>
                    <li class="item is-active">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                    <li class="item">5</li>
                </ul>
            </div>

            <div class="question__text">
                <p class="text">ここには質問が入ります<br>質問が入ります。</p>
                <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
            </div>

            <div class="answer__items">
                <input type="radio" class="js-item" name="q2" id="q2-1">
                <label for="q2-1">選択肢2-1</label>
                <input type="radio" class="js-item" name="q2" id="q2-2">
                <label for="q2-2">選択肢2-2</label>
            </div>
            <button class="nextBtn js-btn" disabled="">次へ</button>
        </div>
    </div>

    <div class="questionJump__box js-questions is-hidden">
        <div class="head__box textHead">
            <p class="questionNum">残り3問です</p>
        </div>
        <div class="questionJump__item">
            <div class="num__box">
                <p class="questionHead">Question</p>
                <ul class="items">
                    <li class="item">1</li>
                    <li class="item">2</li>
                    <li class="item is-active">3</li>
                    <li class="item">4</li>
                    <li class="item">5</li>
                </ul>
            </div>

            <div class="question__text">
                <p class="text">ここには質問が入ります<br>質問が入ります。</p>
            </div>

            <div class="answer__items _flexRow">
                <div class="img__item">
                    <input type="radio" class="js-item" name="q3" id="q3-1">
                    <label for="q3-1" class="checkItem">
                        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                        <p class="checkText">選択肢3-1</p>
                    </label>
                </div>

                <div class="img__item">
                    <input type="radio" class="js-item" name="q3" id="q3-2">
                    <label for="q3-2" class="checkItem">
                        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                        <p class="checkText">選択肢3-2</p>
                    </label>
                </div>

                <div class="img__item">
                    <input type="radio" class="js-item" name="q3" id="q3-3">
                    <label for="q3-3" class="checkItem">
                        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                        <p class="checkText">選択肢3-3</p>
                    </label>
                </div>

                <div class="img__item">
                    <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    <input type="radio" class="js-item" name="q3" id="q3-4">
                    <label for="q3-4" class="checkItem">
                        <p class="checkText">選択肢3-4</p>
                    </label>
                </div>
            </div>
            <div class="select__items js-selectItems">
                <div class="select__item">
                    <p class="head">①<span class="_big">テキスト</span>が<br>入ります</p>
                    <p class="subtext">テキストが入ります</p>
                    <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    <p class="text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります。</p>
                </div>

                <div class="select__item">
                    <p class="head">②<span class="_big">テキスト</span>が<br>入ります</p>
                    <p class="subtext">テキストが入ります</p>
                    <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    <p class="text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります。</p>
                </div>

                <div class="select__item">
                    <p class="head">③<span class="_big">テキスト</span>が<br>入ります</p>
                    <p class="subtext">テキストが入ります</p>
                    <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    <p class="text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります。</p>
                </div>

                <div class="select__item">
                    <p class="head">④<span class="_big">テキスト</span>が<br>入ります</p>
                    <p class="subtext">テキストが入ります</p>
                    <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    <p class="text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります。</p>
                </div>
            </div>
            <button class="nextBtn js-btn" disabled="">次へ</button>
        </div>
    </div>

    <div class="questionJump__box js-questions is-hidden">
        <div class="head__box textHead">
            <p class="questionNum">残り2問です</p>
        </div>
        <div class="questionJump__item">
            <div class="num__box">
                <p class="questionHead">Question</p>
                <ul class="items">
                    <li class="item">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item is-active">4</li>
                    <li class="item">5</li>
                </ul>
            </div>

            <div class="question__text">
                <p class="text">ここには質問が入ります<br>質問が入ります。</p>
            </div>

            <div class="answer__items">
                <div class="img__item100">
                    <input type="checkbox" class="js-item" name="q4" id="q4-1">
                    <label for="q4-1" class="checkItem">
                        <p class="checkText">選択肢4-1</p>
                        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    </label>
                </div>
                <div class="img__item100">
                    <input type="checkbox" class="js-item" name="q4" id="q4-2">
                    <label for="q4-2" class="checkItem">
                        <p class="checkText">選択肢4-2</p>
                        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    </label>
                </div>
                <div class="img__item100">
                    <input type="checkbox" class="js-item" name="q4" id="q4-3">
                    <label for="q4-3" class="checkItem">
                        <p class="checkText">選択肢4-3</p>
                        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
                    </label>
                </div>
            </div>
            <button class="nextBtn js-btn" disabled="">次へ</button>
        </div>
    </div>

    <div class="questionJump__box js-questions is-hidden">
        <div class="head__box textHead">
            <p class="questionNum">残り1問です</p>
        </div>
        <div class="questionJump__item">
            <div class="num__box">
                <p class="questionHead">Question</p>
                <ul class="items">
                    <li class="item">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                    <li class="item is-active">5</li>
                </ul>
            </div>

            <div class="question__text">
                <p class="text">ここには質問が入ります<br>質問が入ります。</p>
                <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
            </div>

            <div class="answer__items">
                <input type="checkbox" class="js-item" name="q5" id="q5-1">
                <label for="q5-1">選択肢5-1</label>
                <input type="checkbox" class="js-item" name="q5" id="q5-2">
                <label for="q5-2">選択肢5-2</label>
                <input type="checkbox" class="js-item" name="q5" id="q5-3">
                <label for="q5-3">選択肢5-3</label>
            </div>
            <button class="nextBtn js-btn" disabled="">回答を完了する</button>
        </div>
    </div>

    <div class="result__box is-hidden">
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" draggable="false">
    </div>
</div>

CSS

 .questionJump__area {
  width: 100%;
  height: auto;
}

 .questionJump__box {
  background: #eee;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
}

 .head__box img {
  width: 100%;
  height: auto;
}

 .head__box.textHead {
  width: 100%;
  height: auto;
  padding: 20px 0 10px;
  background: #E7A5C9;
  position: relative;
}

 .head__box.textHead:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top right, transparent 50%, #E7A5C9 50%) no-repeat top left / 50% 100%,
    linear-gradient(to top left, transparent 50%, #E7A5C9 50%) no-repeat bottom right/50% 100%;
  display: block;
}

 .head__box.textHead .questionNum {
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-family: serif;
}

 .questionJump__item {
  background: #fff;
  margin: 0 10px;
  padding: 40px 10px;
}

 .num__box .questionHead {
  font-size: 20px;
  text-align: center;
  font-family: serif;
  color: #666;
}

 .num__box .items {
  width: 50%;
  height: auto;
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 600px) {
   .num__box .items {
    width: 80%;
  }
}

 .num__box .items:after {
  content: '';
  width: 100%;
  height: 1px;
  border-top: 1px dotted #E7A5C9;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}

 .num__box .items .item {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background: #ccc;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: serif;
}

 .num__box .items .item.is-active {
  background: #E7A5C9;
}

 .question__text {
  margin-top: 30px;
}

 .question__text .text {
  font-size: 30px;
  text-align: center;
  color: #333;
  font-family: serif;
}

@media screen and (max-width: 600px) {
   .question__text .text {
    font-size: 24px;
  }
}

 .question__text img {
  width: 90%;
  height: auto;
  margin: 20px auto 0;
  display: block;
}

 .answer__items {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

 .answer__items input {
  display: none;
}

 .answer__items label {
  width: calc(90% - 70px);
  height: auto;
  font-size: 24px;
  color: #993711;
  background: #eee;
  border-radius: 5px;
  padding: 15px 10px 15px 60px;
  margin: 10px auto 0;
  position: relative;
  transition: background 0.2s, color 0.2s;
}

@media screen and (max-width: 600px) {
   .answer__items label {
    font-size: 16px;
  }
}

 .answer__items label:before {
  content: '';
  width: 20px;
  height: 10px;
  border-bottom: 2px solid #993711;
  border-left: 2px solid #993711;
  position: absolute;
  left: 15px;
  top: 45%;
  transform: translateY(-45%) rotate(-45deg);
  transform-origin: center;
  transition: border-color 0.2s;
}

 .answer__items input[type="radio"]:checked+label,
 .answer__items input[type="checkbox"]:checked+label {
  background: #E7A5C9;
  color: #fff;
}

 .answer__items input[type="radio"]:checked+label:before,
 .answer__items input[type="checkbox"]:checked+label:before {
  border-color: #fff;
}

 .answer__items .img__item {
  width: calc(48% - 4px);
  height: auto;
  margin: 1%;
  border: 2px solid #ccc;
  border-radius: 5px;
}

 .answer__items .img__item.checked {
  border-color: #D45D87;
  background: #E7A5C9;
}

 .answer__items .img__item img {
  width: 100%;
  height: auto;
}

 .answer__items .img__item label.checkItem {
  margin: 0;
  padding: 0;
  background: none;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

 .answer__items .img__item label.checkItem .checkText {
  width: 100%;
  height: auto;
  font-size: 24px;
  color: #993711;
  text-align: center;
  background: none;
  border-radius: 0;
  padding: 50px 0 10px;
  margin: 0;
  display: inline-block;
  position: relative;
  transition: none;
}

@media screen and (max-width: 600px) {
   .answer__items .img__item label.checkItem .checkText {
    font-size: 16px;
  }
}

 .answer__items .img__item.checked label.checkItem .checkText {
  color: #fff;
  background: none;
}

 .answer__items .img__item label.checkItem:before {
  content: none;
}

 .answer__items .img__item label.checkItem .checkText:before {
  content: '';
  width: 0;
  height: 0;
  border: none;
}

 .answer__items .img__item.checked label.checkItem .checkText:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  z-index: 1;
  top: 12px;
  left: 50%;
  transform: translateY(0) translateX(-50%) rotate(-45deg);
}

 .answer__items .img__item label.checkItem .checkText:after {
  content: '';
  width: 30px;
  height: 30px;
  border: 2px solid #ccc;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

 .answer__items .img__item.checked label.checkItem .checkText:after {
  border-color: #fff;
}

 .answer__items .img__item100 {
  width: calc(100% - 20px);
  height: auto;
  margin-top: 1%;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

 .answer__items .img__item100.checked {
  border-color: #D45D87;
  background: #E7A5C9;
}

 .answer__items .img__item100 label.checkItem {
  width: 100%;
  height: auto;
  font-size: 24px;
  color: #993711;
  text-align: center;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  transition: none;
}

@media screen and (max-width: 600px) {
   .answer__items .img__item100 label.checkItem {
    font-size: 16px;
  }
}

 .answer__items .img__item100 label.checkItem .checkText {
  padding: 0 0 0 60px;
  width: auto;
  display: inline-block;
  position: relative;
}

 .answer__items .img__item100.checked label.checkItem .checkText {
  color: #fff;
}

 .answer__items .img__item100 label.checkItem:before {
  display: none;
}

 .answer__items .img__item100 label.checkItem .checkText:before {
  width: 0;
  height: 0;
  border: none;
}

 .answer__items .img__item100.checked label.checkItem .checkText:before {
  content: '';
  width: 20px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  z-index: 1;
  top: 45%;
  left: 6px;
  transform: translateY(-45%) rotate(-45deg);
  position: absolute;
  transform-origin: center;
  transition: border-color 0.2s;
}

 .answer__items .img__item100 label.checkItem .checkText:after {
  content: '';
  width: 30px;
  height: 30px;
  border: 2px solid #ccc;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

 .answer__items .img__item100.checked label.checkItem .checkText:after {
  border-color: #fff;
}

 .answer__items .img__item100 img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

 .nextBtn {
  width: 90%;
  height: auto;
  margin: 30px auto 0;
  padding: 15px 0;
  display: block;
  border-radius: 15px;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
  border: 2px solid #aaa;
  border-color: #11b382;
  background: linear-gradient(0deg, rgba(85, 217, 177, 1) 0%, rgba(17, 179, 130, 1) 20%, rgba(17, 179, 130, 1) 80%, rgba(85, 217, 177, 1) 100%);
  cursor: pointer;
}

@media screen and (max-width: 600px) {
   .nextBtn {
    font-size: 20px;
  }
}

 .nextBtn:disabled {
  border-color: #ccc;
  background: linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(221, 221, 221, 1) 15%, rgba(221, 221, 221, 1) 85%, rgba(238, 238, 238, 1) 100%);
  cursor: auto;
}

 .result__box,
 .result__box img {
  width: 100%;
  height: auto;
}

 .select__items {
  margin-top: 20px;
}

 .select__items .select__item {
  width: calc(100% - 44px);
  height: auto;
  border: 2px solid #D45D87;
  background: #F4D2DE;
  border-radius: 3px;
  padding: 20px;
  display: none;
}

 .select__items .select__item.is-active {
  display: block;
}

 .select__items .select__item .head {
  text-align: center;
  font-size: 20px;
  font-family: serif;
}

 .select__items .select__item .subtext {
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}

 .select__items .select__item img {
  width: calc(100% - 6px);
  height: auto;
  margin-top: 20px;
  border: 2px solid #D45D87;
  border-radius: 3px;
}

 .select__items .select__item .text {
  font-size: 16px;
  margin-top: 20px;
  text-align: left;
}

 .is-hidden {
  display: none;
}

 ._flexRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: inherit;
}

 ._big {
  font-size: 2rem;
}

 p {
  margin: 0;
}

 ul {
  list-style: none;
  padding-left: 0;
}

 img {
  vertical-align: middle;
}
simplicity02 アンケート 未完
RELATED POST