アンケート

回答後ダミー結果表示※要javascript(アンケート)

Q1.アンケート見出しが入ります

回答1
回答1

●●票

回答2
回答2

●●票

回答3
回答3

●●票

回答4
回答4

●●票

下記Beyondコード

JS head

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

        /* 対象のclass */
        const target = '.js-anc-choices';

        _.questionnaire = function(selectors) {
            let elList = document.querySelectorAll(selectors);
            elList.forEach(function(el) {
                let itemList = el.querySelectorAll('.choices');

                itemList.forEach(function(item) {
                    let radio = item.querySelector('.choice-radio');
                    radio.addEventListener('click', function() {
                        item.classList.add('checked');
                        setView();
                    }, false);
                });


                function setView() {
                    itemList.forEach(function(item) {
                        let select = item.querySelector('.selecter');
                        let result = item.querySelector('.results');
                        let woodLine = result.querySelector('.wood-line');


                        item.style.opacity = '0.7';
                        item.style.opacity = '';
                        select.style.display = "none";
                        result.classList.add('show_result');
                        woodLine.classList.add('widthimp');

                        let offTimer = setTimeout(function() {
                            woodLine.classList.remove('widthimp');
                        }, 50)

                    });
                }
            });
        };

        _.init = function() {
            _.questionnaire(target);
        };

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


<!-- タグ設定のJavaScript bodyに以下をカットして貼り付けてください。
同一widgetを複数追加する場合、複数回貼付けは不要です。 -->
<script>
    document.addEventListener('DOMContentLoaded', sbAncChoices.init, false);
</script>
<!-- JavaScript bodyここまで -->

HTML


<div class="blackwood_box js-anc-choices">
    <p class="head">Q1.アンケート見出しが入ります</p>
    <div class="img__box">
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/711633/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" height="360" width="540" draggable="false">
    </div>
    <div class="choices_box">
        <form>
            <div class="choices">
                <div class="selecter"><span class="choice-radio">回答1</span></div>
                <div class="results"><span class="result-text">回答1<span>
                            <div class="wood-line" style="width:52%"><span>●●票</span></div>
                        </span></span>
                </div>
            </div>

            <div class="choices">
                <div class="selecter"><span class="choice-radio">回答2</span></div>
                <div class="results"><span class="result-text">回答2<span>
                            <div class="wood-line" style="width:20%"><span>●●票</span></div>
                        </span></span>
                </div>
            </div>

            <div class="choices">
                <div class="selecter"><span class="choice-radio">回答3</span></div>
                <div class="results"><span class="result-text">回答3<span>
                            <div class="wood-line" style="width:15%"><span>●●票</span></div>
                        </span></span>
                </div>
            </div>

            <div class="choices">
                <div class="selecter"><span class="choice-radio">回答4</span></div>
                <div class="results"><span class="result-text">回答4<span>
                            <div class="wood-line" style="width:13%"><span>●●票</span></div>
                        </span></span>
                </div>
            </div>

        </form>
    </div>
</div>

CSS

 .blackwood_box .head {
  width: calc(100% - 20px);
  height: auto;
  background: #EAA8BF;
  padding: 10px;
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 600px) {
   .blackwood_box .head {
    font-size: 19px;
    margin: 30px 0 20px;
  }
}

 .img__box,
 .choices_box {
  width: calc(100% - 20px);
  height: auto;
  padding: 0 10px;
  margin-top: 10px;
}

 .img__box img {
  width: 100%;
}

 .blackwood_box .results {
  display: none;
}

 .blackwood_box .results.show_result,
 .blackwood_box .selecter {
  display: block;
  margin-bottom: 10px;
}

 .blackwood_box .selecter>span {
  border: solid 2px #222;
  display: block;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 10vw;
}

 .blackwood_box .selecter>span:hover {
  background: #222;
  color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  transition: 200ms;
}

 .show_result .wood-line {
  background: #222;
  color: white;
  border-radius: 10vw;
  transition: 1s;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  width: 1%;
}

 .wood-line span {
  width: 100%;
  text-align: right;
  display: block;
  padding: 5px 10px 5px 0;
  box-sizing: border-box;
  white-space: nowrap;
}

 span.result-text {
  font-weight: bold;
}

 .checked .results span.result-text {
  padding-left: 1.1em;
  position: relative;
}

 .checked .results span.result-text::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check%22%20class%3D%22svg-inline--fa%20fa-check%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

 span.result-text>span {
  display: block;
  border: 1px solid #000000;
  border-radius: 30px;
}

 .widthimp {
  width: 1% !important;
}