Test wiedzy z fotografii
Sprawdź swoją wiedzę z fotografii!
Czy wiesz, jak uzyskać efekt pięknie rozmytego tła? A może zastanawiasz się, co to właściwie jest "bokeh"? Jeśli interesujesz się fotografią lub chcesz sprawdzić swoje umiejętności, mam coś dla Ciebie!
Zapraszam do rozwiązania testu wiedzy o fotografii, który składa się z 50 pytań wielokrotnego wyboru. Znajdziesz w nim pytania dotyczące:
To świetna okazja, aby sprawdzić swoją wiedzę, utrwalić informacje lub dowiedzieć się czegoś nowego. Niezależnie od tego, czy jesteś początkującym pasjonatem, czy doświadczonym fotografem – ten test jest dla Ciebie!
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!
Przygotuj się na fotograficzne wyzwanie i przekonaj się, ile wiesz! ????
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 = 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 = 'bg-danger';
}
else if ((self.countDownValue >= 25) && (self.countDownValue < 50))
{
self.countDownBg = 'bg-orange';
}
else if ((self.countDownValue >= 50) && (self.countDownValue < 75))
{
self.countDownBg = 'bg-warning';
}
else
{
self.countDownBg = '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: 'baf0b97583242469704f4c7d437e23e783163207',
level: self.level,
picked: self.picked,
index: self.index
};
axios.post(urlSite('public/ajax/app/exec/19'), 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.
Ocena aplikacji
Dziękujemy!
()