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

[Anonymous]

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

Код: Выделить всё

(This is the pie chart) &  (This is the accordion)
0 to 49%                   Your leadership skills will need to be improved for your business to at least
survive.
50% to 70%                 You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100%                You have very good leadership skills to help your organization grow.
< /code>
Как показать круговую диаграмму с процентом внутри нее? И помимо пирога аккордеон, который также даст подробную информацию из рейтингов?

Пожалуйста, мне действительно нужна помощь.  PrettyPrint-Override ">#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;
}< /code>







%







%







%




Leadership Development System

Lorem ipsum...

Marketing System

Lorem ipsum...

Financial System

Lorem ipsum...

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