cppst static for iticse 2022 presentation
This commit is contained in:
parent
3ab1b75f37
commit
5f7e623eb3
|
|
@ -5,6 +5,7 @@ categories:
|
|||
- software
|
||||
tags:
|
||||
- open source
|
||||
- self-hosted
|
||||
---
|
||||
|
||||
_Give Up GitHub!_---a clear message that the Software Freedom Conservancy started spreading to open source software (FOSS) developers on 29 June via https://giveupgithub.org. Why? The whole story is available on their website, but the gist is that recently, GitHub yet again proved that they don't really care about FOSS, or about the privacy or licensing choices of their users. Their newest product called [GitHub Copilot](https://github.com/features/copilot) is "trained on billions of lines of code, GitHub Copilot turns natural language prompts into coding suggestions across dozens of languages.", as the landing page suggests. That is, they used _your_ code, with or without your consent, and while it used to be FOSS, now it's converted into a closed-source product you have to pay for. If you have a repository hosted on GitHub, I urge you to read what the Conservancy has to say about this.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
{
|
||||
"attributes": [
|
||||
"Curiosity",
|
||||
"Creative State of Mind",
|
||||
"Creative Techniques",
|
||||
"Technical Knowledge",
|
||||
"Communication",
|
||||
"Constraints",
|
||||
"Critical Thinking"
|
||||
],
|
||||
"questions": [{
|
||||
"q": "During the project, I really came outside my comfort zone",
|
||||
"v": [ { "weight": 1, "attribute": "Curiosity" }]
|
||||
}, {
|
||||
"q": "Many parts of the project peaked my curiosity",
|
||||
"v": [ { "weight": 1, "attribute": "Curiosity" }]
|
||||
}, {
|
||||
"q": "I liked to really delve into some aspects of the project",
|
||||
"v": [ { "weight": 1, "attribute": "Curiosity" }]
|
||||
}, {
|
||||
"q": "I did not feel the urge to create things",
|
||||
"v": [ { "weight": 1, "attribute": "Curiosity" }],
|
||||
"invert": true
|
||||
},
|
||||
|
||||
{
|
||||
"q": "I remained concentrated for a long time on a part of the project",
|
||||
"v": [ { "weight": 1, "attribute": "Creative State of Mind" }]
|
||||
}, {
|
||||
"q": "I used productivity tools to better concentrate on the essence of the problem (e.g. shortcuts, cmdline tools, ...)",
|
||||
"v": [ { "weight": 1, "attribute": "Creative State of Mind" }]
|
||||
}, {
|
||||
"q": "I did not find the experience very rewarding",
|
||||
"v": [ { "weight": 1, "attribute": "Creative State of Mind" }],
|
||||
"invert": true
|
||||
}, {
|
||||
"q": "Time seemed to fly by while working",
|
||||
"v": [ { "weight": 1, "attribute": "Creative State of Mind" }]
|
||||
},
|
||||
|
||||
{
|
||||
"q": "I approached problems in multiple ways",
|
||||
"v": [ { "weight": 1, "attribute": "Creative Techniques" }]
|
||||
}, {
|
||||
"q": "I did not use knowledge from another domain to solve something",
|
||||
"v": [ { "weight": 1, "attribute": "Creative Techniques" }],
|
||||
"invert": true
|
||||
}, {
|
||||
"q": "I combined different ideas to solve a problem",
|
||||
"v": [ { "weight": 1, "attribute": "Creative Techniques" }]
|
||||
}, {
|
||||
"q": "I occasionally took deliberate breaks to let things settle in",
|
||||
"v": [ { "weight": 1, "attribute": "Creative Techniques" }]
|
||||
},
|
||||
|
||||
{
|
||||
"q": "I gained little knowledge as the project progressed",
|
||||
"v": [ { "weight": 1, "attribute": "Technical Knowledge" }],
|
||||
"invert": true
|
||||
}, {
|
||||
"q": "I learned new practical techniques and also applied them",
|
||||
"v": [ { "weight": 1, "attribute": "Technical Knowledge" }]
|
||||
}, {
|
||||
"q": "I have gained insight into the problem domain",
|
||||
"v": [ { "weight": 1, "attribute": "Technical Knowledge" }]
|
||||
},
|
||||
|
||||
{
|
||||
"q": "I barely asked for feedback from my fellow students",
|
||||
"v": [ { "weight": 1, "attribute": "Communication" }],
|
||||
"invert": true
|
||||
}, {
|
||||
"q": "I visualized the problem on a white-board or on paper",
|
||||
"v": [ { "weight": 1, "attribute": "Communication" }]
|
||||
}, {
|
||||
"q": "I regularly asked for feedback from my teachers",
|
||||
"v": [ { "weight": 1, "attribute": "Communication" }]
|
||||
}, {
|
||||
"q": "I regularly shared my ideas with others",
|
||||
"v": [ { "weight": 1, "attribute": "Communication" }]
|
||||
},
|
||||
|
||||
{
|
||||
"q": "The limitations of the assignment kept me alert",
|
||||
"v": [ { "weight": 1, "attribute": "Constraints" }]
|
||||
}, {
|
||||
"q": "I regularly thought about the correctness of my solution",
|
||||
"v": [ { "weight": 1, "attribute": "Constraints" }]
|
||||
}, {
|
||||
"q": "Due to the time pressure I performed worse",
|
||||
"v": [ { "weight": 1, "attribute": "Constraints" }],
|
||||
"invert": true
|
||||
}, {
|
||||
"q": "I tried to make my program efficient as possible",
|
||||
"v": [ { "weight": 1, "attribute": "Constraints" }]
|
||||
},
|
||||
|
||||
{
|
||||
"q": "I barely questioned the choices made and did not come up with alternatives",
|
||||
"v": [ { "weight": 1, "attribute": "Critical Thinking" }],
|
||||
"invert": true
|
||||
}, {
|
||||
"q": "I often took multiple options into careful consideration",
|
||||
"v": [ { "weight": 1, "attribute": "Critical Thinking" }]
|
||||
}, {
|
||||
"q": "I often re-evaluated my approach in order to learn from it",
|
||||
"v": [ { "weight": 1, "attribute": "Critical Thinking" }]
|
||||
}, {
|
||||
"q": "I used multiple sources to find out information myself",
|
||||
"v": [ { "weight": 1, "attribute": "Critical Thinking" }]
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<script type='text/javascript' src='https://www.amcharts.com/lib/4/core.js?ver=20190614-01'></script>
|
||||
<script type='text/javascript' src='https://www.amcharts.com/lib/4/charts.js?ver=20190614-01'></script>
|
||||
<script type='text/javascript' src='https://www.amcharts.com/lib/4/themes/animated.js?ver=20190614-01'></script>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
|
||||
h1, h2 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.question {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.input label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<title>Creative Programing Problem Solving Test (CPPST)</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>Creative Programming Problem Solving Test (CPPST)</h1>
|
||||
<hr/>
|
||||
|
||||
<div id="testmeta">
|
||||
<p>
|
||||
Here are a few statements that may or may not be applicable, <em>in context of your project</em>. There are no right or wrong answers, so please just answer honestly. In the end, you'll receive an overview of all CPPST attributes.
|
||||
</p>
|
||||
|
||||
|
||||
<div id="test">
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<button type="button" id="calculate" class="btn btn-primary">📈 Calculate Results</button>
|
||||
<button type="button" id="random" class="btn btn-primary">🍀 I'm Feeling Lucky</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="chartmeta" class="hide">
|
||||
<p>
|
||||
Below you see the results divided in seven unique attributes of the CPPST model, each with a score from 1 to 5.
|
||||
</p>
|
||||
<div id='chartdiv'></div>
|
||||
|
||||
<h2>Results in Detail</h2>
|
||||
<p>
|
||||
Please notice that these results are always <strong>in context of your project</strong>! A low score on an attribute does not mean you are not good at that attribute. It merely suggests that in context of the project, you were less creative. <br/>
|
||||
</p>
|
||||
<p>
|
||||
<h3>1. Curiosity</h3>
|
||||
Your score: <span class="result" id="result_Curiosity"></span>/5. <br/><br/>
|
||||
|
||||
A <em>curious</em> someone is a person that always shows interest in new, unknown things, that likes to come out of his or hers comfort zone and that likes to delve into a subject or to create things. Someone who does not need external motivation.
|
||||
<br/>
|
||||
<strong>Curiosity</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: did not learn new things or no will/desire to learn new things</li>
|
||||
<li>High score: A "hungry" mind. Motivated to look for new things, enriches own world</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>2. Creative State of Mind</h3>
|
||||
Your score: <span class="result" id="result_Creative-State-of-Mind"></span>/5. <br/><br/>
|
||||
|
||||
Someone with a <em>creative state of mind</em> is a person that faces work with the right attitude such that creativity can flow optimally and time seems to fly by.
|
||||
<br/><strong>Focus</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: Stays at the surface of problems. Gets interrupted frequently.</li>
|
||||
<li>High score: Feels freedom and a "flow" during work, goes deep sometimes, has illuminating "aha" moments</li>
|
||||
</ul>
|
||||
|
||||
<h3>3. Creative Techniques</h3>
|
||||
Your score: <span class="result" id="result_Creative-Techniques"></span>/5. <br/><br/>
|
||||
|
||||
|
||||
Someone who uses <em>creative techniques</em> is someone who knows how exactly to approach problems, and which techniques are involved to get to the best possible solution.
|
||||
<br/><strong>Technique</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: no idea how to take hurdles. Halted when stuck.</li>
|
||||
<li>High score: Ideas on how to move forward, especially when stuck.</li>
|
||||
</ul>
|
||||
|
||||
<h3>4. Technical Knowledge</h3>
|
||||
Your score: <span class="result" id="result_Technical-Knowledge"></span>/5. <br/><br/>
|
||||
|
||||
Someone with <em>technical knowledge</em> is someone who has the know-how to tackle the problem at hand: knowledge of programming languages, techniques, willing to continuously improve, and so forth.
|
||||
<br/><strong>Knowledge</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: no new knowledge gathered or too little knowledge to solve bigger programming problems</li>
|
||||
<li>High score: builds upon newly acquired knowledge to take on problems easily.</li>
|
||||
</ul>
|
||||
|
||||
<h3>5. Communication</h3>
|
||||
Your score: <span class="result" id="result_Communication"></span>/5. <br/><br/>
|
||||
|
||||
A <em>communicative</em> someone is a person driven by internal or external feedback, that way striving to be able to offer the best solution possible. Someone who actively shares.
|
||||
<br/><strong>Feedback</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: does not ask for feedback, resulting in suboptimal solutions.</li>
|
||||
<li>High score: uses fast and regular feedback of others to improve the solution. Shares own ideas, open to serendipity.</li>
|
||||
</ul>
|
||||
|
||||
<h3>6. Constraints</h3>
|
||||
Your score: <span class="result" id="result_Constraints"></span>/5. <br/><br/>
|
||||
|
||||
Someone who can handle <em>constraints</em> is someone who gets the best out of themselves given the limitations that are applied because of internal or external circumstances.
|
||||
<br/><strong>Context</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: cannot deal with the constraints of the assignment and therefore cannot arrive at a relevant solution.</li>
|
||||
<li>High score: the context of the assignment can be turned into focus and thus better performance.</li>
|
||||
</ul>
|
||||
|
||||
<h3>7. Critical Thinking</h3>
|
||||
Your score: <span class="result" id="result_Critical-Thinking"></span>/5. <br/><br/>
|
||||
|
||||
A <em>critical</em> someone is a questioner who does not only doubt things, but also comes up with alternatives, compares, considers, and implements. Critical thinking means making well-informed decisions in context of the problem at hand.
|
||||
<br/><strong>Introspection</strong> is the most important factor.
|
||||
|
||||
<ul>
|
||||
<li>Low score: takes everything for granted without questioning the facts. Loses time to irrelevant things.</li>
|
||||
<li>High score: Questions requirements and comes up with alternatives. Is willing to change things half-way through.</li>
|
||||
</ul>
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button type="button" id="download" class="btn btn-primary">💾 Download Results</button>
|
||||
<button type="button" id="restart" class="btn btn-primary">🔄 Restart test</button>
|
||||
<a id="downloadAnchorElem" style="display:none"></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<h2>The Paper</h2>
|
||||
<p>
|
||||
<a href="https://arxiv.org/pdf/2203.13565.pdf"/>Self-Assessing Creative Problem Solving for Aspiring Software Developers: A Pilot Study</a>.<br/>
|
||||
The seven attributes are identified in the paper <a href="https://people.cs.kuleuven.be/~wouter.groeneveld/creafocus/">Exploring the Role of Creativity in Software Engineering</a>.
|
||||
</p>
|
||||
<hr/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.radios = [ "Completely disagree", "Disagree", "Neither agree nor disagree", "Agree", "Completely agree" ];
|
||||
</script>
|
||||
<script src="test.js"></script>
|
||||
|
||||
<footer class="page-footer bg-light font-small pt-4" style="border-top: 1px solid lightgray;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="footer-copyright text-center py-3 col-sm">
|
||||
Wouter Groeneveld, Lynn Van den Broeck, Joost Vennekens, Kris Aerts<br>
|
||||
<pre>{firstname dot lastname} at kuleuven dot be</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
Object.defineProperty(Array.prototype, 'shuffle', {
|
||||
value: function() {
|
||||
for (let i = this.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[this[i], this[j]] = [this[j], this[i]];
|
||||
}
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
(() => {
|
||||
const unit = 5
|
||||
|
||||
const testmeta = document.querySelector('#testmeta')
|
||||
const chartmeta = document.querySelector('#chartmeta')
|
||||
let questionData = undefined
|
||||
|
||||
const hide = (el) => {
|
||||
el.style.display = "none"
|
||||
return el
|
||||
}
|
||||
const show = (el) => {
|
||||
el.style.display = "block"
|
||||
return el
|
||||
}
|
||||
|
||||
const questionTemplate = (tpl) => {
|
||||
return `
|
||||
<div class="question">
|
||||
<h3>${tpl.i + 1}. ${tpl.q}</h3>
|
||||
|
||||
<div class="input" data-q="${tpl.q}">
|
||||
<label><input type="radio" name="q-${tpl.i}" value="5"> ${window.radios[4]}</label>
|
||||
<label><input type="radio" name="q-${tpl.i}" value="4"> ${window.radios[3]}</label>
|
||||
<label><input type="radio" name="q-${tpl.i}" value="3"> ${window.radios[2]}</label>
|
||||
<label><input type="radio" name="q-${tpl.i}" value="2"> ${window.radios[1]}</label>
|
||||
<label><input type="radio" name="q-${tpl.i}" value="1"> ${window.radios[0]}</label>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
const downloadResults = () => {
|
||||
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(window.results))
|
||||
var dlAnchorElem = document.querySelector('#downloadAnchorElem')
|
||||
dlAnchorElem.setAttribute("href", dataStr)
|
||||
dlAnchorElem.setAttribute("download", "results.json")
|
||||
dlAnchorElem.click()
|
||||
}
|
||||
|
||||
const fillInRandomResults = () => {
|
||||
document.querySelectorAll('.input').forEach(d => { const r = Math.round(Math.random() * 4) + 1; d.querySelector(`input[value="${r}"]`).click(); })
|
||||
calculateResults()
|
||||
}
|
||||
|
||||
const calculateResults = () => {
|
||||
const addResultsInHtml = (data) => {
|
||||
data.forEach(d => {
|
||||
const attr = d.attribute.replace(/ /g, '-')
|
||||
document.querySelector(`#result_${attr}`).innerHTML = d.score;
|
||||
})
|
||||
}
|
||||
|
||||
const generateAmChart = (data) => {
|
||||
// expected data: [{attribute: "Curiosity", score: 5}]
|
||||
am4core.useTheme(am4themes_animated)
|
||||
const chart = am4core.create("chartdiv", am4charts.RadarChart)
|
||||
chart.data = data
|
||||
|
||||
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis())
|
||||
categoryAxis.dataFields.category = "attribute"
|
||||
categoryAxis.cursorTooltipEnabled = false
|
||||
|
||||
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis())
|
||||
valueAxis.renderer.axisFills.template.fill = chart.colors.getIndex(2)
|
||||
valueAxis.renderer.axisFills.template.fillOpacity = 0.05
|
||||
valueAxis.min = 0
|
||||
valueAxis.max = unit
|
||||
|
||||
const series = chart.series.push(new am4charts.RadarSeries())
|
||||
series.dataFields.valueY = "score"
|
||||
series.tooltipText = "[bold]{score}[/]"
|
||||
//series.fill = am4core.color('black')
|
||||
series.dataFields.categoryX = "attribute"
|
||||
series.strokeWidth = 3
|
||||
|
||||
chart.cursor = new am4charts.RadarCursor()
|
||||
chart.cursor.lineY.disabled = true
|
||||
}
|
||||
|
||||
const vals = [0, 1, 2, 3, 4, 5]
|
||||
const valsInverted = [0, 5, 4, 3, 2, 1]
|
||||
|
||||
const convertInputResultsToChartData = () => {
|
||||
return questionData.attributes.map((attribute, i) => {
|
||||
const calculatedQs = questionData.questions
|
||||
.filter(q => q.v.find(v => v.attribute === attribute))
|
||||
.map(q => {
|
||||
const checked = document.querySelector(`.input[data-q="${q.q}"] input:checked`)
|
||||
const value = checked ? parseInt(checked.value) : 0
|
||||
const weight = q.v.find(v => v.attribute === attribute).weight
|
||||
|
||||
return {
|
||||
weight,
|
||||
question: q.q,
|
||||
value: q.invert ? valsInverted[value] : vals[value]
|
||||
}
|
||||
})
|
||||
const totalWeights = calculatedQs
|
||||
.map(calc => calc.weight * unit)
|
||||
.reduce((one, two) => one + two, 0)
|
||||
const totalScore = calculatedQs
|
||||
.map(calc => calc.weight * calc.value)
|
||||
.reduce((one, two) => one + two, 0)
|
||||
const theScore = (totalScore / (totalWeights == 0 ? 1 : totalWeights)) * unit
|
||||
|
||||
return {
|
||||
attribute,
|
||||
questions: calculatedQs,
|
||||
score: (theScore === 0 ? 1 : theScore).toFixed(2)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(document.querySelectorAll('input:checked').length < questionData.questions.length) {
|
||||
alert("Plese answer all questions first!")
|
||||
return
|
||||
}
|
||||
|
||||
hide(testmeta)
|
||||
show(chartmeta)
|
||||
window.results = convertInputResultsToChartData()
|
||||
generateAmChart(results)
|
||||
addResultsInHtml(results)
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
const generateQuestions = (data) => {
|
||||
questionData = data
|
||||
/* data format:
|
||||
attributes
|
||||
questions { q, v [ weight, attrIndex ] } -> totals to 100 parts
|
||||
*/
|
||||
let html = ''
|
||||
data.questions.slice().shuffle().forEach((q, i) => {
|
||||
html += questionTemplate({
|
||||
q: q.q,
|
||||
i: i
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelector('#test').innerHTML = html;
|
||||
}
|
||||
|
||||
document.querySelector('#download').addEventListener('click', downloadResults)
|
||||
document.querySelector('#random').addEventListener('click', fillInRandomResults)
|
||||
document.querySelector('#calculate').addEventListener('click', calculateResults)
|
||||
document.querySelector('#restart').addEventListener('click', () => {
|
||||
location.reload()
|
||||
})
|
||||
|
||||
fetch('data.json').then((res) => {
|
||||
return res.json();
|
||||
}).then(generateQuestions);
|
||||
})()
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue