Simple Scorecard Container

Updated on 26 Sep 2024
2 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

before following the below steps first add the snippet of container which present in bottom of the page take it in notepad/notepad++ and save it.:

Below is the Simple Scorecard Container where which all snippet to be used is shown.
All the snippets comment to be replaced by the snippets shown in List Of HTML Snippets for Simple Scorecard
Example <!- header snippet -> is to be replaced with the snippet on the given link Header Snippet
Go to the source data and find theSub Pillar Name and check for your team how many sub pillars are assigned and add like this. If you have 3 sub pillars check this comment in container <!- sub pillar start from here -> <!- sub pillar end here -> copy the code with comments & paste code thricely below <!- Keep adding for more sub pillar -> when you paste give the numbers in comment like <!- sub pillar 1 start from here -> so you get better understanding
* Go to the source data and find the question_text and Sub Pillar Name and check how many questions are assigned to your Sub pillar and add that number of question card like this. If sub pillar contains more than 2 question check this comment <!- question card start here -><!- question card end here -> copy the code with comments & paste the code below <! - Keep adding for more question card -> when you paste give the numbers in comment like <! - question card 1start here ->
Find Scorecard Mapping section in the Source Data Sheet.
You will see from Scorecard Mapping 2 to Scorecard Mapping 5 and start using respective cards. check that snippets in below link https://probench.document360.io/docs/list-of-html-snippets-for-simple-scorecard
{{dashboard.data["Pillar_Name_Dataset_Field_Name"]}} here we added placeholder like this Pillar_Name_Dataset_Field_Name so you have to add dataset field here like this {{dashboard.data["Marketplace_Pillar_Name"]}}

Snippet

<head>
<link href="https://globalchildforum.benchmarkingframework.com/file/default.css/" rel="stylesheet">
	<link href="https://globalchildforum.benchmarkingframework.com/file/general.css/" rel="stylesheet">
    <link href="https://globalchildforum.benchmarkingframework.com/file/card.css/" rel="stylesheet">
	<link href="https://globalchildforum.benchmarkingframework.com/file/gcf.css/" rel="stylesheet">
</head>
<div class="main-container">
	<!--header snippet -->
	<main class="main-content">
		<div class="container-fluid">
			<div class="content">
				<!-- Print Scorecard PDF Snippet -->

				<!-- Company Details Snippet -->

				<div id="overall-results" class="section">
					<div class="cards-wrapper">
						<div class="cards-wrapper-title">
							<h2>Overall Results</h2>
						</div>

						<div class="row">
							<div class="col-md-6">
								<div class="card">
									<div class="card-title clearfix">
										<h3>Overall scores</h3>
									</div>
									<!-- Simple Overall Details -->
									<div class="card-btn-block"></div>
								</div>

							</div>
							<div class="col-md-6">
								<!-- feedback snippet -->

                                <h3>Next Step</h3>
								<!-- next step snippet -->

							</div>
						</div>
					</div>
					<div class="cards-wrapper">
						<div class="row">
							<div class="col-md-4">
								<div class="card">
									<div class="card-title clearfix">
										<h3><img src="../file/pillar-icon.png/" class="gcf-icon" />{{dashboard.data["Pillar_Name_Dataset_Field_Name"]}}</h3>
									</div>
									<!-- Pillar Progress Bar Snippet -->
									<div class="gcf-button-container">
										<a href="#" class="gcf-button no-print">View detailed results</a>
									</div>
								</div>

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

				</div>

				<!-- Pillar Start from here -->
				<div id="workplace" class="section" style="page-break-before: always">
					<div class="cards-wrapper">
						<div class="cards-wrapper-title">
							<h2>{{dashboard.data["Pillar_Name_Dataset_Field_Name"]}}</h2>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="card">
									<div class="card-title clearfix">
										<h3>Overall results</h3>
									</div>

									<!-- Pillar Progress Bar Snippet -->
									<div class="card-btn-block"></div>
								</div>
							</div>
							<div class="col-md-6">

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

					<!-- sub pillar start from here -->
					<!-- Group Header Snippet -->


					<div class="cards-wrapper">
						<div class="row">

							<!-- question card start here -->
							<div class="col-md-6">
								<div class="card">
									<div class="card-title clearfix">
										<!--quetion header snippet-->
										<!-- Question Snippet -->
									</div>
									<!-- Question Progress Bar Snippet -->
								</div>
							</div>
							<!-- question card end here -->

							 <!-- Keep adding for more question card -->

						</div>
					</div>
					<!-- sub pillar end  here -->

                    <!-- Keep adding for more sub pillar -->
				</div>
				<!-- pillar end here -->


			</div>
		</div>
	</main>

</div>

Was this article helpful?

What's Next

Feedback snippet