Q1.アンケート見出しが入ります
下記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;
}