Test wiedzy z geografii
Sprawdź swoją wiedzę z geografii!
Czy jesteś gotowy, aby zmierzyć się z wyzwaniem i sprawdzić, jak dobrze znasz naszą planetę? Przygotowaliśmy dla Ciebie 50 pytań wielokrotnego wyboru dotyczących najciekawszych faktów geograficznych świata.
Dlaczego warto wziąć udział w teście?
- Poznasz fascynujące ciekawostki o Ziemi
- Przetestujesz swoją wiedzę o kontynentach, krajach, rzekach i górach
- Sprawdzisz, jak wypadasz w porównaniu do innych
Jak to działa?
- Każde pytanie ma cztery odpowiedzi (A, B, C, D) — tylko jedna jest poprawna.
- Zapisz swoje odpowiedzi i porównaj z kluczem na końcu.
Jak obsługiwać aplikację?
Kliknij na pole odpowiedzi w każdym pytaniu a następnie kliknij następne pytanie. Przycisk będzie aktywny tylko jeśli klikniesz w pole odpowiedzi. Przed przejściem do następnego pytania zostanie podświetlona na zielono prawidłowa odpowiedź, tak aby poinformować Cię czy wybrana odpowiedź była prawidłowa czy nie. Po skończeniu testu wyświetlą się wyniki. Masz 1 minutę 40 sekund na udzielenie odpowiedzi na każde pytanie o czym informuje odliczanie. Po tym czasie jeśli niczego nie wybierzesz aplikacja uzna że nie udzielono prawidłowej odpowiedzi i przejdzie do następnego pytania. Jeśli wybierzesz odpowiedź a licznik dojdzie do zera to przejdzie do następnego pytania przyjmując odpowiedź którą wybrałeś. W każdej chwili możesz zmienić swój wybór o ile jeszcze licznik nie doszedł do zera. Kolor paska postępu odzwierciedla czas pozostały do końca.
Gotowy? Zacznij już teraz!
Nie czekaj — zanurz się w fascynującym świecie geografii i baw się dobrze!
Loading...
Wynik testu
Kod po stronie przeglądarki
<div id="app">
<div class="my-5">
<div class="row my-3">
<div class="col-md-6">
<label for="level" class="form-label">Poziom trudności testu</label>
<select class="form-select" id="level" v-bind:disabled="started" v-model="level">
<option value="beginner">początkujący</option>
</select>
</div>
</div>
<div class="row my-3">
<div class="col-12">
<button class="btn btn-primary" v-if="!started" v-on:click="startTest">Rozpocznij test</button>
</div>
</div>
<div class="d-flex justify-content-center" v-if="loading && firstLoad">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<h2 class="text-center" v-text="question.section" v-if="!done"></h2>
<h3 class="mt-3" v-text="question.question" v-if="!done"></h3>
<pre class="my-3 bg-light p-3" v-if="!done && (question.code != '')"><code v-text="question.code"></code></pre>
<div class="my-3" v-if="!done && (question.question != '')">
<div class="form-check">
<input class="form-check-input" type="radio" id="q1" value="A" v-model="picked" v-on:change="enableButton"/>
<label class="form-check-label" v-bind:class="optionClassA" for="q1" v-text="question.answers.A"></label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="q2" value="B" v-model="picked" v-on:change="enableButton"/>
<label class="form-check-label" v-bind:class="optionClassB" for="q2" v-text="question.answers.B"></label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="q3" value="C" v-model="picked" v-on:change="enableButton"/>
<label class="form-check-label" v-bind:class="optionClassC" for="q3" v-text="question.answers.C"></label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="q4" value="D" v-model="picked" v-on:change="enableButton"/>
<label class="form-check-label" v-bind:class="optionClassD" for="q4" v-text="question.answers.D"></label>
</div>
</div>
<div class="mt-4" v-if="running && !done">
<div class="d-flex">
<div class="progress me-auto w-75 mt-2" role="progressbar" aria-label="Pozostały czas" v-bind:aria-valuenow="countDownValue" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" v-bind:class="countDownBg" v-bind:style="{width: countDownValue + '%'}" v-text="countDownText"></div>
</div>
<button type="button" class="btn btn-primary" v-on:click="nextQuestion" v-bind:disabled="buttonDisabled">
<span class="spinner-border spinner-border-sm" aria-hidden="true" v-show="loading"></span>
<span role="status">Idź dalej</span>
</button>
</div>
</div>
<div v-if="done">
<div class="alert alert-light">
<h5>Wynik testu</h5>
<div>
<p v-html="result"></p>
<div class="progress-bar" role="progressbar" aria-label="Wynik testu" v-bind:aria-valuenow="percent" aria-valuemin="0" aria-valuemax="100">
<div class="progress" v-bind:class="progressClass" v-bind:style="{width: percent + '%'}"></div>
</div>
<p class="mt-3" v-text="suggestion"></p>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = null;
document.addEventListener('DOMContentLoaded', function() {
vm = new Vue({
el: '#app',
data: {
question: {
section: '',
question: '',
code: '',
answers: {
A: '',
B: '',
C: '',
D: ''
},
answer: ''
},
level: 'beginner',
picked: null,
index: 0,
max: 999999999,
result: '',
suggestion: '',
done: false,
buttonDisabled: false,
percent: 0,
progressClass: '',
validAnswer: null,
lock: false,
started: false,
running: false,
firstLoad: false,
loading: false,
//countdown
now: null,
countDownInterval: null,
countDownDate: null,
countDownText: '',
countDownBg: 'bg-success',
countDownValue: 0
},
methods: {
getOptionClass: function(opt)
{
return (this.validAnswer && (this.validAnswer === opt)) ? 'text-success fw-bold' : 'text-normal';
},
enableButton: function()
{
this.buttonDisabled = false;
},
countDown: function()
{
var self = this;
self.now = new Date().getTime();
var distance = self.countDownDate - self.now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.ceil((distance % (1000 * 60)) / 1000);
self.countDownText = minutes + "m " + seconds + "s";
self.countDownValue = minutes * 60 + seconds;
if (self.countDownValue < 25)
{
self.countDownBg = 'text-bg-danger';
}
else if ((self.countDownValue >= 25) && (self.countDownValue < 50))
{
self.countDownBg = 'text-bg-orange';
}
else if ((self.countDownValue >= 50) && (self.countDownValue < 75))
{
self.countDownBg = 'text-bg-warning';
}
else
{
self.countDownBg = 'text-bg-success';
}
if (distance <= 0)
{
clearInterval(self.countDownInterval);
self.countDownInterval = null;
self.countDownText = '';
self.countDownValue = 0;
//no answer
if (!self.picked)
{
self.picked = '0';
}
if (!self.lock)
{
self.nextQuestion();
}
}
},
startTest: function()
{
this.started = true;
this.firstLoad = true;
this.loading = true;
this.nextQuestion();
},
nextQuestion: function ()
{
var self = this;
self.buttonDisabled = true;
self.lock = true;
self.loading = true;
var data = {
token: '3f50ef0c188fb59c45ebf018592721aa5b4f15d8',
level: self.level,
picked: self.picked,
index: self.index
};
axios.post(urlSite('public/ajax/app/exec/16'), data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.then(function (response) {
var data = response.data;
var done = data.meta.done;
if (done)
{
if (self.countDownInterval !== null)
{
clearInterval(self.countDownInterval);
self.countDownInterval = null;
self.countDownText = '';
self.countDownValue = 0;
}
self.progressClass = data.data.progress_class;
self.suggestion = data.data.suggestion;
setTimeout(function() {
self.done = true;
self.lock = false;
self.loading = false;
}, 2000);
}
if (self.picked)
{
self.index = data.data.index;
}
self.max = data.data.max;
self.result = data.data.result;
self.percent = data.data.percent;
self.validAnswer = data.data.valid_answer;
if (data.data.question)
{
setTimeout(function() {
self.validAnswer = null;
self.picked = null;
self.question = data.data.question;
self.countDownDate = new Date().getTime() + 100000;
if (self.countDownInterval === null)
{
self.countDownInterval = setInterval(self.countDown, 1000);
}
self.running = true;
self.lock = false;
self.firstLoad = false;
self.loading = false;
}, 2000);
}
}).catch(function(error) {
self.lock = false;
self.firstLoad = false;
self.loading = false;
BootstrapToast.show({title: 'Błąd', message: error.response.data.message, when: 'teraz', type: 'text-bg-danger'});
});
}
},
computed: {
optionClassA: function() { return this.getOptionClass('A'); },
optionClassB: function() { return this.getOptionClass('B'); },
optionClassC: function() { return this.getOptionClass('C'); },
optionClassD: function() { return this.getOptionClass('D'); }
}
});
});
</script>
Kod po stronie serwera
Uwaga
Kod na serwerze dla tej aplikacji jest kodem zamkniętym.
Tagi
Dziękujemy!
()