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:style="{width: countDownValue + '%', background: countDownBg, color: countDownColor}" 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 src="http://www.dariuszrorat.ugu.pl/assets/js/base/progress.js"></script>
<script>
let 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: '',
countDownColor: '#000000',
countDownBg: '#000000',
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()
{
const self = this;
self.now = new Date().getTime();
const distance = self.countDownDate - self.now;
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.ceil((distance % (1000 * 60)) / 1000);
const value = minutes * 60 + seconds;
const props = getProgressProps(value);
self.countDownText = minutes + "m " + seconds + "s";
self.countDownValue = minutes * 60 + seconds;
self.countDownBg = props.background;
self.countDownColor = props.color;
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 ()
{
const self = this;
self.buttonDisabled = true;
self.lock = true;
self.loading = true;
const params = {
token: 'b6673898a658315c7fb836db3af81b7e6190da1b',
level: self.level,
picked: self.picked,
index: self.index
};
axios.post(urlSite('public/ajax/app/exec/16'), params, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.then(function (response) {
const data = response.data;
const 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: 'danger', icon: 'bi-x-circle-fill'});
});
}
},
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
Kod serwera niedostępny
Kod po stronie serwera tej aplikacji jest zamknięty i nie jest publicznie dostępny.
30 stycznia 2025
1
Kategorie
Technologie
Dziękujemy!
()