Процент вывода с аккордеоном в каждой из каждой многоэтапной формы после отправки ⇐ Html

[Anonymous]

Я действительно новичок в веб -разработке. Так что мне действительно нужны несколько руководств, советы и хитрости о том, как делать кодирование. Итак, вот подробности ... < /p>
После того, как я заполняю свои формы «да» и «нет» на каждом этапах многоэтажных шагов формы, я хочу иметь оценку на каждом этапах. Например, развитие лидерства имеет 12 Да и 8 Нет, и система рассчитывает его процент от
(это круговая диаграмма) и (это аккордеон)
0 до 49%. Ваши навыки лидерства должны быть улучшены для вашего бизнеса, по крайней мере,
, возможно, у вас, вероятно, может быть достаточно, чтобы вы могли быть в норме, что вы можете быть в норме, чтобы вы могли быть в норме, чтобы быть в норме, чтобы вы могли быть в норме, чтобы вы могли быть в норме, чтобы вы могли быть в норме, чтобы вы могли быть в норме, чтобы быть в норме, что у вас, вероятно, может быть достаточно. />
от 70% до 100% у вас есть очень хорошие навыки лидерства, чтобы помочь вашей организации расти.

#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}

.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}

.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}

.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}

.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}








%







%







%




Leadership Development System

Lorem ipsum...

Marketing System

Lorem ipsum...

Financial System

Lorem ipsum...



Подробнее здесь: https://stackoverflow.com/questions/671 ... e-submitte