アンケート

選択後ダミー結果と計算結果表示※要javascript(アンケート)

 

～8万円台
～8万円台

●●％

9万円台～12万円台
9万円台～12万円台

●●％

13万円台～16万円代
13万円台～16万円代

●●％

17万円台～
17万円台～

●●％


今の家に住み続ける場合・・・

損してしまうかもしれません！

下記Beyondコード

JS head

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

        const target = '.js-anc-graph-calc';

        _.questionnaire = function(el) {
            let resultBox = el.querySelector('.js-resultBox');
            let resultTxt = el.querySelector('.js-result');
            let minPlace, maxPlace;
            let itemList = el.querySelectorAll('.choices');

            itemList.forEach(function(item) {
                let radio = item.querySelector('.choice-radio');
                radio.addEventListener('click', function() {
                    item.classList.add('checked');
                    setView();
                    minPlace = radio.dataset.minprice;
                    maxPlace = radio.dataset.maxprice;
                    if (resultTxt) {
                        calcMoney(minPlace, maxPlace);
                        resultBox.style.display = 'block';
                    }
                }, 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)

                });
            }

            function calcMoney(min, max) {
                let minCalc = parseInt((min - 6) * 12 * 35);
                let maxCalc = parseInt((max - 6) * 12 * 35);
                let text;
                if (min == 0) {
                    text = '<span class="kara">〜</span>' + maxCalc + '<span class="unit">万円</span>';
                } else if (max == 0) {
                    text = minCalc + '<span class="unit">万円</span><span class="kara">〜</span>';
                } else {
                    text = minCalc + '<span class="unit">万円</span><span class="kara">〜</span>' + maxCalc + '<span class="unit">万円</span>';
                }
                resultTxt.innerHTML = text;
            }
        };

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

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

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

HTML

<div class="blackwood_box js-anc-graph-calc">
    <div class="choices_box">
        <form>
            <!--回答1ここから-->
            <div class="choices">
                <div class="selecter"><span class="choice-radio" data-minprice="0" data-maxprice="8">～8万円台</span></div>
                <div class="results"><span class="result-text">～8万円台<span>
                            <div class="wood-line" style="width:52%"><span>●●％</span></div>
                        </span></span>
                </div>
            </div>
            <!--回答1ここまで--><!--回答2ここから-->
            <div class="choices">
                <div class="selecter"><span class="choice-radio" data-minprice="9" data-maxprice="12">9万円台～12万円台</span></div>
                <div class="results"><span class="result-text">9万円台～12万円台<span>
                            <div class="wood-line" style="width:20%"><span>●●％</span></div>
                        </span></span>
                </div>
            </div>
            <!--回答2ここまで--><!--回答3ここから-->
            <div class="choices">
                <div class="selecter"><span class="choice-radio" data-minprice="13" data-maxprice="16">13万円台～16万円代</span></div>
                <div class="results"><span class="result-text">13万円台～16万円代<span>
                            <div class="wood-line" style="width:15%"><span>●●％</span></div>
                        </span></span>
                </div>
            </div>
            <!--回答3ここまで--><!--回答4ここから-->
            <div class="choices">
                <div class="selecter"><span class="choice-radio" data-minprice="17" data-maxprice="0">17万円台～</span></div>
                <div class="results"><span class="result-text">17万円台～<span>
                            <div class="wood-line" style="width:13%"><span>●●％</span></div>
                        </span></span>
                </div>
            </div>
            <!--回答4ここまで-->
        </form>
    </div>
    <div class="result__box js-resultBox">
        <p class="text">今の家に住み続ける場合・・・<br>
            <span class="select js-result"></span><br>
            損してしまうかもしれません！
        </p>
    </div>
</div>

CSS

 .blackwood_box {
  position: relative;
  color: #613d29;
  margin: 30px 0;
}

 .blackwood_box .results {
  display: none;
}

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

 .blackwood_box .selecter {
  margin-bottom: 10px;
}

 .blackwood_box .selecter>span {
  border: solid 3px #613d29;
  display: block;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 28px;
}

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

 .show_result .wood-line {
  background: #f96680;
  color: white;
  border-radius: 30px;
  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;
}

/*スマートフォン表示時（max-widthは適宜変更してください）*/
@media screen and (max-width:767px) {
   .wood-line span {
    padding-right: 3px;
    font-size: 0.7em;
  }
}

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

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

 .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%22%23ff0000%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;
}

 .result__box {
  margin-top: 50px;
  display: none;
}

 .result__box .text {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.5;
}

 .result__box .text .select {
  font-size: 1.5em;
  color: #E06A3B;
  font-weight: bold;
  letter-spacing: 0.03em;
}

 .result__box .text .select .unit {
  font-size: 0.7em;
}

 .result__box .text .select .kara {
  color: #613d29;
  font-size: 0.7em;
}

 .widthimp {
  width: 1% !important;
}
simplicity02 アンケート
RELATED POST